BlackHole's Blog
·
Vue 响应式原理：从 2.x 的 Object.defineProperty 到 3.x 的 Proxy
内容提要
Vue的响应式原理从2.x的Object.defineProperty转变为3.x的Proxy。Vue2存在新增/删除属性无法自动更新和数组索引无法追踪等缺陷，而Vue3通过Proxy实现整体对象代理，支持懒代理，性能更优，能自动追踪所有属性变更。
关键要点
-
Vue2使用Object.defineProperty实现响应式，存在新增/删除属性无法自动更新的问题。
-
Vue3通过Proxy实现整体对象代理，支持懒代理，性能更优。
-
Vue2需要重写数组的变异方法，而Vue3可以直接拦截数组索引和length。
-
Vue3的依赖收集使用WeakMap和Map进行全局缓存，启动速度更快，内存占用更低。
-
Vue3能够自动追踪新增/删除属性，无需使用Vue.set。
延伸解读
Vue2与Vue3的根本区别
Vue2使用Object.defineProperty进行响应式处理，存在新增和删除属性无法自动更新的问题。而Vue3通过Proxy实现整体对象代理，能够自动追踪所有属性的变更。这一转变不仅提升了性能，还简化了开发者的使用体验。
懒代理的优势
Vue3的懒代理策略意味着只有在访问深层对象时才会创建新的Proxy，这样可以显著减少初始化时的性能开销。这种方法在处理复杂数据结构时尤为重要，能够提高应用的响应速度和内存效率。
对开发者的影响
Vue3的改进使得开发者在处理响应式数据时不再需要使用Vue.set来手动触发更新，这降低了代码的复杂性和出错的可能性。开发者可以更专注于业务逻辑，而不是响应式系统的细节。
延伸问答
Vue2和Vue3在响应式原理上有什么主要区别？
Vue2使用Object.defineProperty实现响应式，而Vue3通过Proxy实现整体对象代理，支持懒代理，性能更优。
Vue3如何解决Vue2中新增/删除属性无法自动更新的问题？
Vue3通过Proxy实现自动追踪新增/删除属性，无需使用Vue.set。
Vue2在处理数组时存在哪些缺陷？
Vue2需要重写数组的变异方法，数组索引和length无法直接追踪。
Vue3的懒代理策略有什么优势？
Vue3的懒代理策略只在访问到深层对象时才返回新的Proxy，从而提高性能。
Vue3是如何进行依赖收集的？
Vue3使用WeakMap和Map进行全局缓存，支持高效的依赖收集。
Vue3相比于Vue2在启动速度和内存占用上有什么改进？
Vue3启动速度更快，内存占用更低，得益于Proxy的整体对象代理和懒代理策略。
