vue3的效率提升

chancoki
#vue.js

vue3的效率提升主要表现在哪些方面？

Vue 3 的效率提升主要体现在以下几个方面，这些改进通过底层机制重构和编译优化显著提升了性能和开发体验：

  1. ​响应式系统升级：Proxy 替代 Object.defineProperty
    Vue 3 使用 ​Proxy 实现响应式系统，解决了 Vue 2 的以下问题：
  • 性能优化：Proxy 直接代理整个对象，无需递归遍历所有属性，仅在属性被访问时动态代理（懒代理），减少初始化开销。
  • 功能增强：支持监听对象属性的新增/删除、数组索引变化和 length 修改（例如 arr[0] = 1 或 arr.length = 0 均可触发更新）。
  • 兼容性扩展：支持对 Map、Set 等数据类型的响应式处理。

对比：Vue 2 的 Object.defineProperty 需递归遍历对象属性，无法监听数组索引和新增属性，且深层嵌套对象性能较差。

  1. ​编译优化：静态分析与模板提升
    Vue 3 的编译器在编译阶段进行深度优化：
  • 静态提升（Hoist Static）​：将模板中的静态节点和属性提升为常量，避免重复创建。
  • 预字符串化（Pre-stringification）​：将连续静态内容转换为字符串，减少虚拟 DOM 节点数量。
  • 事件处理缓存：缓存事件处理函数（如 @click），避免每次渲染重新生成。

5ae302eafa5de7ea35c341fbafac867e.png

效果：减少内存占用和运行时计算，渲染效率提升 30%~60%。

  1. ​虚拟 DOM 优化：Patch Flag 与 Block Tree
    Vue 3 通过虚拟 DOM 的精细化比对提升 Diff 效率：
  • Patch Flag：在编译时为动态节点添加标记（如 TEXT 或 CLASS），仅对比标记部分而非全量节点。
  • Block Tree：Vue2在对比新旧树的时候，并不知道哪些节点是静态的，哪些是动态的，因此只能一层一层比较，这就浪费了大部分时间在对比静态节点上。
    在根节点里面记录，这个节点后代的所有节点中，哪些是动态的，编译器就会把它记录下来，到时候直接找到这个记录动态节点的数组，循环数组一次对比数组的每一项。
    树不稳定的时候会出问题，不稳定的分支会变成一个block。

对比：Vue 2 的 Diff 算法需全量比对所有节点，效率较低。

e0764b0b0e9ef3522efc473ecc89e79b.png

评论