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

Composition API：

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

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 树的其他位置，而不依赖于组件层次结构。

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

Fragments：

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

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

Emits Option：

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

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。

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 更加灵活、高效且易于维护。