Vue2源码探索（二）：巧妙的数据劫持，揭秘数据响应原理

2023-09-06 15:36:26

引言

在Vue2中，数据劫持是实现响应式系统的重要一环，它能够跟踪数据变化并自动更新视图。在本文中，我们将深入Vue2源码，探索Vue2是如何通过巧妙的数据劫持来实现数据响应的。

对象劫持：递归与Object.defineProperty

对于对象数据，Vue2采用递归+Object.defineProperty的方式进行劫持。递归可以遍历对象的每个属性，而Object.defineProperty可以修改对象属性的getter和setter，从而在数据变化时触发相应的更新操作。

function defineReactive(obj, key, val) {
  // 递归劫持子属性
  if (typeof val === 'object' && val !== null) {
    observe(val);
  }

  // 给属性添加getter和setter
  Object.defineProperty(obj, key, {
    get() {
      console.log(`你访问了属性：${key}`);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log(`你修改了属性：${key}，旧值是：${val}，新值是：${newVal}`);
        val = newVal;
      }
    }
  });
}

在上面的代码中，defineReactive函数首先检查val是否是一个对象，如果是，则递归劫持其子属性。然后，它使用Object.defineProperty给obj的key属性添加getter和setter，以便在获取和设置属性值时触发相应的更新操作。

数组劫持：原型继承与方法劫持

对于数组数据，Vue2采用原型继承和方法劫持相结合的方式进行劫持。原型继承可以修改数组的原型方法，从而在数组发生变化时触发相应的更新操作。方法劫持可以劫持数组的push、pop等方法，以便在数组发生变化时触发相应的更新操作。

// 数组劫持
const arrayMethods = Object.create(Array.prototype);
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
  const original = arrayMethods[method];
  arrayMethods[method] = function (...args) {
    // 调用原始方法
    const result = original.apply(this, args);
    // 触发更新
    console.log(`你调用了数组方法：${method}`);
    this.__ob__.dep.notify();
    return result;
  };
});

// 重写数组的原型
Object.setPrototypeOf(Array.prototype, arrayMethods);

在上面的代码中，我们首先创建了一个新的对象arrayMethods，它继承了Array.prototype。然后，我们遍历数组的常用方法，并用新的方法替换原来的方法。新的方法会先调用原来的方法，然后触发更新操作。最后，我们用arrayMethods替换Array.prototype，从而劫持了数组的常用方法。