Vue 3 相对 Vue 2 改了什么？

响应式从 Object.defineProperty 换成 Proxy，逻辑复用从选项和 mixin 转向组合式 API，并且用基于 Proxy 的观察跳过没读过的数据。打包可以按使用到的 API 做 tree shaking。生命周期名字和过滤器这些 API 也有破坏性变化。

原理

Vue 2 观察不到后加的属性、按下标改数组，要 Vue.set。Vue 3 的 reactive 能拦截新增和删除。见 Vue 响应式。

组合式 API 把相关的状态和请求写在一起，而不是拆进 data、methods、watch。选项式 API 仍然可用。一个组件里不要两套风格各写一半。

片段允许组件有多个根节点。v-model 改成 modelValue 和 update:modelValue。过滤器去掉了，用方法或计算属性。$listeners 并进 $attrs。事件总线 API 去掉了，跨组件用状态库或自己的订阅。

Teleport 把节点渲染到组件树外的 DOM 位置，适合弹层。Suspense 用来等异步依赖，生产使用前要看当前版本是否稳定。

性能上，编译器标记动态节点，静态节点提升后不再反复比较。见虚拟 DOM。

追问

迁移时最先会遇到什么？

全局 API 变成应用实例上的方法：createApp，而不是 Vue.use 改全局。过滤器和事件总线要先改掉。第三方组件要确认有 Vue 3 版本。

组合式 API 就更快吗？

更快来自编译和响应式的跳过，不是「用了 setup 函数就快」。大列表、稳定引用这些优化两边都要做。

易错点

把 Vue 2 的 beforeDestroy 原样留下，钩子不会执行。
解构 reactive 对象后失去响应。用 toRefs，或在模板里直接点属性。
一个个比较生命周期名字，漏了过滤器、v-model 和全局 API。

相关