vue2和vue3响应式的区别(结合代码的梳理)

Vue 2 的Object.defineProperty的局限性

1. 无法监听属性的添加和删除

• Object.defineProperty 只能监听已经存在的属性，无法监听动态添加或删除的属性。

• 例如：

  const obj = { a: 1 };
  Vue.set(obj, 'b', 2); // 需要使用 Vue.set 才能让新属性变成响应式
  delete obj.a; // 需要使用 Vue.delete 才能触发更新
  

2. 无法监听数组的变化

• Object.defineProperty 无法直接监听数组的变化（如 push、pop、splice 等操作）。

• Vue 2 通过重写数组的原型方法来实现对数组的监听：

  const arrayProto = Array.prototype;
  const arrayMethods = Object.create(arrayProto);
  ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
      const original = arrayProto[method];
      arrayMethods[method] = function (...args) {
          const result = original.apply(this, args);
          dep.notify(); // 手动触发更新
          return result;
      };
  });
  

3. 性能问题

• Object.defineProperty 需要递归遍历对象的每个属性，将其转换为响应式数据，这在初始化时会有一定的性能开销。
• 对于嵌套对象，需要递归监听，性能较差。

Vue 3 的Proxy的优势

Vue 3 使用 Proxy 来实现响应式数据，解决了 Vue 2 的许多局限性：

1. 可以监听属性的添加和删除

• Proxy 可以拦截对象的任意操作，包括属性的添加和删除。

• 例如：

  const obj = new Proxy({ a: 1 }, {
      get(target, key) {
          console.log(`读取属性 ${key}`);
          return Reflect.get(target, key);
      },
      set(target, key, value) {
          console.log(`设置属性 ${key} 为 ${value}`);
          return Reflect.set(target, key, value);
      },
      deleteProperty(target, key) {
          console.log(`删除属性 ${key}`);
          return Reflect.deleteProperty(target, key);
      }
  });
  
  obj.b = 2; // 触发 set
  delete obj.a; // 触发 deleteProperty
  

2. 可以监听数组的变化

• Proxy 可以直接监听数组的变化，无需重写数组方法。

• 例如：

  const arr = new Proxy([1, 2, 3], {
      get(target, key) {
          console.log(`读取数组元素 ${key}`);
          return Reflect.get(target, key);
      },
      set(target, key, value) {
          console.log(`设置数组元素 ${key} 为 ${value}`);
          return Reflect.set(target, key, value);
      }
  });
  
  arr.push(4); // 触发 set
  

3. 性能更好

• Proxy 是惰性的，只有在访问属性时才会进行依赖收集，减少了初始化时的性能开销。
• 对于嵌套对象，Proxy 可以按需监听，性能更好。

Vue 2 和 Vue 3 的对比

结合代码的梳理

Vue 2 的实现（基于 Object.defineProperty）

function observe(obj) {
    for (const key in obj) {
        let internalValue = obj[key];
        let fns = new Set();

        // 递归监听嵌套对象
        if (typeof internalValue === 'object' && internalValue !== null) {
            observe(internalValue);
        }

        Object.defineProperty(obj, key, {
            get() {
                if (activeFunc) {
                    fns.add(activeFunc);
                }
                return internalValue;
            },
            set(val) {
                internalValue = val;
                // 递归监听新值
                if (typeof val === 'object' && val !== null) {
                    observe(val);
                }
                fns.forEach(fn => fn());
            }
        });
    }
}

Vue 3 的实现（基于 Proxy）

function reactive(obj) {
    return new Proxy(obj, {
        get(target, key, receiver) {
            const dep = getDep(target, key);
            dep.depend(); // 依赖收集
            const result = Reflect.get(target, key, receiver);
            // 递归监听嵌套对象
            if (typeof result === 'object' && result !== null) {
                return reactive(result);
            }
            return result;
        },
        set(target, key, value, receiver) {
            const dep = getDep(target, key);
            const result = Reflect.set(target, key, value, receiver);
            dep.notify(); // 派发更新
            return result;
        },
        deleteProperty(target, key) {
            const dep = getDep(target, key);
            const result = Reflect.deleteProperty(target, key);
            dep.notify(); // 派发更新
            return result;
        }
    });
}

总结

• Vue 2 使用 Object.defineProperty，无法监听属性的添加和删除，也无法直接监听数组的变化，需要通过 Vue.set 和重写数组方法来实现。
• Vue 3 使用 Proxy，可以监听所有操作（包括属性的添加、删除和数组的变化），性能更好，代码更简洁。

到此这篇关于vue2和vue3响应式区别的文章就介绍到这了,更多相关vue2和vue3响应式区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！