Vue 3 入门：简介与 Vue 2 的差异

一、Vue 3 简介

Vue 3 在保留易学易用的同时，针对大型应用的可维护性与性能做了系统升级，是当前 Vue 开发的主流选择。

发布时间线

2020 年 9 月正式发布 Vue 3。

性能

1. 响应式重写：基于 Proxy，支持动态增删属性、数组索引等；初始化可采用懒代理策略。
2. 编译期优化：静态提升、PatchFlag 标记动态节点、事件缓存等，降低运行时 patch 成本。
3. 更小体积：更好的 Tree-shaking，常用路径可按需打包。

组合式 API

用 setup / <script setup> 按逻辑关注点组织代码，替代大型单文件里 data、methods 分散难维护的问题；配合函数级复用（Composable）替代 mixin 命名冲突。

TypeScript

源码 TS 重写，类型推导与 IDE 体验明显提升。

新内置能力

• Fragment：多根节点无需多余包裹。
• Teleport：将子树挂到任意 DOM 容器（如 body 下弹窗）。
• Suspense：异步依赖与异步组件的兜底渲染。

---

二、与 Vue 2 的核心差异

更快

• 响应式：Proxy vs Object.defineProperty。
• diff：编译信息 + 列表 LIS 等策略（详见虚拟 DOM 章节）。
• 构建：推荐 Vite（ESM + esbuild 预构建）。

更小

• Tree-shaking 友好；废弃 API 逐步移除（如 $on/$off/$once，改用 mitt 等）。

API 迁移摘录

• Vue.nextTick → import { nextTick } from 'vue'
• Vue.set/delete → 原生赋值即可（Proxy）
• Vue.prototype → app.config.globalProperties
• .sync → 多 v-model 参数写法
• filters → 方法 / 计算属性

开发体验

• Composition API + <script setup> 减少样板代码。
• TS 协同更佳。

diff 策略对照

• Vue 2：双端比较子节点列表。
• Vue 3：静态标记 + 区块树缩小对比面；列表移动用 最长递增子序列减少 DOM 移动。

---

三、延伸阅读

• 响应式实现细节：02-响应式：原理·Proxy·ref·reactive
• 组合式入口：03-组合式 API：setup·生命周期·hooks