Vue3 为何比 Vue2 快

目录

1. Proxy 响应式

1.1 Vue2 的 Object.defineProperty

1.2 Vue3 的 Proxy Reflect

2. PatchFlag（动，静-节点标记）

3. hoistStatic（静态节点作用域提升）

4. cacheHandler（缓存事件）

5. SSR 优化（静态节点绕过 vdom）

6. tree-shaking（动态 import）

---

1. Proxy 响应式

1.1 Vue2 的 Object.defineProperty

• 深度监听需要一次性递归，影响性能
• 无法监听新增属性和删除属性（需要：Vue.set Vue.delete）
• 无法原生监听数组，需要特殊处理

1.2 Vue3 的 Proxy Reflect

• Proxy 深度监听性能更好
  Vue2 的 Object.defineProperty 一次性递归监听
  Vue3 的 Proxy 在 get 时才递归监听
• Proxy 可监听 新增 / 删除属性
• 可原生监听数组变化

2. PatchFlag（动，静-节点标记）

• 编译模板时，动态节点做标记
• 标记，分为不同的类型，如 TEXT PROPS
• diff 算法时，可以区分静态节点，以及不同类型的动态节点

 Vue3 模板编译工具：
Vue Template Explorerhttps://vue-next-template-explorer.netlify.app/

3. hoistStatic（静态节点作用域提升）

• 将静态节点的定义，提升到父作用域，缓存起来（再次 render 时，不会重新定义）
• 多个相邻的静态节点，会被合并起来
• 典型的拿空间换时间的优化策略

 多个相邻静态节点，被合并

4. cacheHandler（缓存事件）

• 缓存事件
• 典型的拿空间换时间的优化策略

5. SSR 优化（静态节点绕过 vdom）

• 静态节点直接输出，绕过了 vdom
• 动态节点，还是需要动态渲染

6. tree-shaking（动态 import）

• 编译时，根据不同的情况，引入不同的 API