BlackHole's Blog
·
Vue 响应式原理：从 2.x 的 Object.defineProperty 到 3.x 的 Proxy
💡
原文中文，约2400字，阅读约需6分钟。
📝
内容提要
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如何解决Vue2中新增/删除属性无法自动更新的问题？
Vue3通过Proxy实现自动追踪新增/删除属性，无需使用Vue.set。
Vue2在处理数组时存在哪些缺陷？
Vue2需要重写数组的变异方法，数组索引和length无法直接追踪。
Vue3的懒代理策略有什么优势？
Vue3的懒代理策略只在访问到深层对象时才返回新的Proxy，从而提高性能。
Vue3是如何进行依赖收集的？
Vue3使用WeakMap和Map进行全局缓存，支持高效的依赖收集。
Vue3相比于Vue2在启动速度和内存占用上有什么改进？
Vue3启动速度更快，内存占用更低，得益于Proxy的整体对象代理和懒代理策略。
➡️
