走走看看 2025-8-6

今天主要看了几个讲vue2和vue3之间的对比的文章； 怎么说呢，感觉大家懂的都比我多，我就是个总结机器，哈哈哈

vue2

说说他的响应机制是啥 Object.defineProperty()

 let obj = {}
        Object.defineProperty(obj, 'key', {
           get() {
               return 1
           },
           set(value) {
               console.log(value)
           }
        })

听说是有些局限

1. 只支持对象，不能劫持Map、Set等
2. 只能追踪到对象的最外层，,遇到嵌套对象，需要递归处理，存在一定的性能瓶颈
3. 监听不完善，重写了数组的push等方法，修改length或者索引，无法感知到
4. 遇到一些不能及时更新视图的，可以使用vue.$set方法

vue3

说一些最大的改变，使用Proxy重写了整个响应体系，解决只监听对象最外层的问题。

  const proxy = new Proxy(obj, {
            get(target, key, receiver) {
                return Reflect.get(target, key, receiver)
            },
            set(target, key, value, receiver) {
                return Reflect.set(target, key, value, receiver)
            }
        })

使用Reflect可以更好的配合proxy，不是劫持属性，而是代理对象本身

对比

1. vue2 中 是一层一层去劫持每个属性，嵌套层数多了，就会出现性能问题；vue3 使用proxy，可以代理整颗对象树
2. vue2的依赖追踪比较分散，不好统一管理；vue3 使用effect可以自动追踪依赖，追踪和触发交给track、trigger去做
3. vue2是选项式的，按模块书写；vue3引入组合式api，不用依赖组件的生命周期，逻辑可以拆分封装，更容易复用

vue3 的注意点

1. 无法Polyfill，Proxy是es6引入的高级特性，无法被降级或Polyfill；
2. watchEffect里访问太多变量，会导致性能问题，控制依赖粒度
3. 解构会导致响应式丢失