vue3中的新特性
1. Composition API
-
核心特性：提供了
setup()函数，允许开发者按逻辑组织代码，而不是按选项（data、methods等）。 -
响应式 API：
ref、reactive、computed、watch等函数，更灵活地管理响应式状态。 -
生命周期钩子：
onMounted、onUpdated等，可以在setup()中使用。
2. 更好的 TypeScript 支持
-
Vue 3 完全用 TypeScript 重写，提供了更好的类型推断和集成。
3. 性能优化
-
更快的渲染：虚拟 DOM 重写，优化了 diff 算法。
-
Tree-shaking：更小的打包体积，未使用的功能会被剔除。
-
静态提升（Static Hoisting）：编译时优化，提升静态节点。
4. Fragment（片段）
-
组件可以返回多个根节点，无需包裹在一个父元素中。
5. Teleport（传送）
-
允许将组件的一部分渲染到 DOM 中的其他位置（如模态框、弹窗）。
6. Suspense（异步组件）
-
提供了一种处理异步组件加载状态的方式（如显示加载中的占位符）。
7. 新的响应式系统
-
基于 ES6 的
Proxy实现，性能更好，支持更多响应式数据类型（如Map、Set）。
8. 自定义渲染器 API
-
允许开发者创建自定义渲染器（如渲染到 Canvas、WebGL 或原生应用）。
9. 全局 API 修改
-
使用
createApp()创建应用实例，避免全局配置污染。 -
全局 API（如
nextTick、directive）改为按需导入。
10. v-model 改进
-
支持多个
v-model绑定（如v-model:title、v-model:content）。 -
可以自定义修饰符。
11. 新的指令和组件
-
v-memo：优化渲染性能，缓存部分 DOM。 -
<Transition>和<TransitionGroup>改进：更灵活的过渡动画。
12. 移除或变更的特性
-
移除了
$on、$off等事件 API。 -
filter过滤器被移除，推荐使用计算属性或方法。
示例代码（Composition API）：
<template><div><button @click="increment">Count: {{ count }}</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);const increment = () => count.value++;return { count, increment };},
};
</script>Vue 3 的这些改进使得代码速度更快、体积更小、 更易维护，同时保持了 Vue 2 的易用性。