【前端面试题-14】vue3与vue2 的虚拟DOM对比

最新推荐文章于 2024-05-18 11:09:56 发布

天下一场夢

最新推荐文章于 2024-05-18 11:09:56 发布

阅读量402

点赞数 5

分类专栏：前端面试题文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/ivan5277/article/details/137104576

版权

24 篇文章 0 订阅

订阅专栏

Vue3与Vue2在虚拟DOM方面的对比主要体现在以下几个方面：

响应式系统的改进：
- Vue2使用Object.defineProperty来实现数据的响应式绑定，而Vue3改用了ES6的Proxy，这不仅增强了对对象属性新增、删除的监测能力，而且能更细粒度地跟踪变化，进而影响到虚拟DOM的更新。
虚拟DOM重写与优化：
- Vue3对虚拟DOM进行了彻底的重写，充分利用了现代JavaScript引擎的最新优化，提升了更新性能。
- Vue3引入了静态标记（patchFlags），能够识别静态节点，即不会动态改变的节点，在后续渲染中可以直接复用，减少不必要的diff计算。
- Vue3改进了diff算法，使其更具针对性，例如在对比过程中，对于没有动态内容的节点可以更快地跳过，而对于有动态内容的部分则精确查找差异。
依赖收集：
- Vue2在初始化和数据变更时，会通过遍历所有相关节点来收集依赖。
- Vue3则是直接通过Proxy在访问响应式数据时就收集依赖，这意味着只有真正使用的数据变化才会触发相关组件的虚拟DOM更新。
渲染函数和模板编译：
- Vue3在编译阶段做了更多优化，比如提前预编译模板，使运行时的性能更高。
- Vue3的渲染函数更加灵活，并且允许创建更高效的VNode（虚拟节点），包括对渲染上下文和函数式组件的优化。

综上所述，Vue3在虚拟DOM层面上做出了显著的性能优化和功能增强，使得Vue应用在构建大型项目时具有更高的性能和更低的内存消耗。同时，Vue3还通过Composition API等方式让开发者对虚拟DOM的控制更为精细和直观。

关注