Vue 3 相比 Vue 2 有哪些变化？

详细解析#

主要变化一览#

v-if 与 v-for 的优先级见 v-if 和 v-show 有什么区别，生命周期的变化见 Vue 的生命周期。

为什么更快、更小#

• 响应式：Proxy 代理整个对象，嵌套对象在被访问时才转换，初始化时不用递归遍历所有属性，详见 Vue 3 的响应式原理
• 编译优化：编译器给动态节点打上标记并把它们收集起来，更新时跳过静态内容，详见 Vue 3 在编译阶段做了哪些优化
• diff 算法：Vue 2 对子节点列表做双端比较，Vue 3 对乱序部分求最长递增子序列，移动 DOM 的次数更少，详见 虚拟 DOM 和 diff 算法
• tree-shaking：Vue 2 的 Vue.nextTick 这类 API 都挂在 Vue 对象上，打包工具无法判断有没有用到，只能全部打包。Vue 3 改成 import { nextTick } from 'vue' 这样的具名导出，Transition、KeepAlive 等内置组件也是按需引入，没用到的功能不会进入最终产物

开发方式#

• Composition API：按逻辑关注点组织代码，用组合式函数代替 mixins 复用逻辑，数据来源清晰、没有命名冲突，详见 Composition API 和 Options API 的区别
• TypeScript：Composition API 基本是普通的变量和函数，类型可以自然推导，不再依赖 this 上复杂的类型声明

新增的特性#

• Fragment：组件可以有多个根节点。这时 $attrs 不会自动绑定到根元素上，需要手动写 v-bind="$attrs"
• Teleport：把一部分模板渲染到组件外的 DOM 节点上，比如 <Teleport to="body">。常用于弹窗，避免受父元素的 transform、层叠上下文等样式影响
• Suspense：在异步组件或异步 setup 完成之前显示后备内容，目前仍是实验性功能
• 多个 v-model：例如 v-model:title="title"，取代了 .sync 修饰符，详见 v-model 的原理
• emits 选项：声明组件会触发哪些事件。没有声明的事件监听器会被当作透传属性，绑定到根元素上
• <script setup>：Composition API 的编译时语法糖，写法更简洁，详见 <script setup> 有什么特点

用 createApp 创建应用#

Vue 2 的全局 API 直接修改 Vue 构造函数，注册的组件、插件会影响所有实例，同一页面上的多个应用之间、测试用例之间都会互相污染。Vue 3 把这些配置挂在应用实例上：

// Vue 2
import Vue from 'vue'
import App from './App.vue'
import BaseButton from './components/BaseButton.vue'

Vue.component('BaseButton', BaseButton) // 影响所有实例
new Vue({ render: (h) => h(App) }).$mount('#app')

// Vue 3
import { createApp } from 'vue'
import App from './App.vue'
import BaseButton from './components/BaseButton.vue'

const app = createApp(App)
app.component('BaseButton', BaseButton) // 只对这个应用生效
app.mount('#app')

维护状态#

Vue 2 已于 2023 年 12 月 31 日停止维护，官方不再发布更新和安全修复。新项目应该直接使用 Vue 3。

面试官可能追问#

易错点#

• Options API 没有被废弃，Vue 3 中仍然可以使用，也可以和 Composition API 混用
• v-if 和 v-for 的优先级在两个版本中正好相反
• Suspense 目前仍是实验性功能，不要说成稳定特性