vue3相比于vue2有哪些新特性？

Melhor_2024-07-16 14:26

Composition API：

组合式 API 提供了更灵活和可组合的方式来组织代码。它允许将逻辑功能集中在一起，而不是分散在生命周期钩子中。

dart 复制代码

import { ref, reactive, computed, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const state = reactive({ message: 'Hello' });

    function increment() {
      count.value++;
    }

    const doubleCount = computed(() => count.value * 2);

    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

    return { count, state, increment, doubleCount };
  }
};

Teleport：

Teleport 允许将组件的模板部分渲染到 DOM 树的其他位置，而不依赖于组件层次结构。

dart 复制代码

<template>
  <teleport to="body">
    <div class="modal">This is a modal</div>
  </teleport>
</template>

Fragments：

Vue 3 支持组件返回多个根节点，这意味着你不再需要包裹多个元素在单一的根元素内。

dart 复制代码

<template>
  <div>First element</div>
  <div>Second element</div>
</template>

Emits Option：

emits 选项明确列出了组件可以触发的事件，有助于事件的类型检查。

dart 复制代码

export default {
  emits: ['update'],
  setup(props, { emit }) {
    function updateValue() {
      emit('update', newValue);
    }
    return { updateValue };
  }
};

Better TypeScript Support：

Vue 3 从一开始就设计为更好地支持 TypeScript，提供了更好的类型推断和类型检查。

Improved Performance：

Vue 3 使用了 Proxy 代替 Vue 2 中的 Object.defineProperty，提供了更好的性能和更少的限制。

Composition API with Reactivity：

提供了更细粒度的 reactivity 和更灵活的 state management。

dart 复制代码

import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello'
    });

    return {
      ...toRefs(state)
    };
  }
};

New Lifecycle Hooks：

新的生命周期钩子，如 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount 和 onUnmounted，提供了更细粒度的控制。

新特性使得 Vue 3 比 Vue 2 更加灵活、高效且易于维护。