Vue响应性系统中的数组方法重写：`push`/`pop`等操作如何触发依赖更新 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 响应式系统中的数组方法重写：`push`/`pop`等操作如何触发依赖更新

大家好，今天我们来深入探讨 Vue 响应式系统中的一个关键组成部分：数组方法的重写，以及这些重写的方法如何触发依赖更新。理解这个机制对于掌握 Vue 的内部运作原理至关重要，也能帮助我们编写更高效、更可靠的 Vue 应用。

响应式系统的基础：依赖收集与派发

在深入数组方法之前，我们先简单回顾一下 Vue 响应式系统的核心概念：依赖收集和派发。

依赖收集 (Dependency Collection)：当 Vue 组件在渲染过程中访问响应式数据时，Vue 会追踪这些访问，并将当前组件的 watcher 对象（通常是渲染 watcher）添加到该响应式数据的依赖列表中。这个过程称为依赖收集。
依赖派发 (Dependency Dispatch)：当响应式数据发生变化时，Vue 会遍历该数据的所有依赖（watcher 对象），并通知它们进行更新。这个过程称为依赖派发，或者也称为依赖通知。

简单来说，就是谁用了我的数据，我就记住它，我变了，我就通知它。

为什么需要重写数组方法？

JavaScript 中的数组是引用类型。直接修改数组元素（例如 arr[0] = newValue）会被 Vue 追踪到，并触发依赖更新。但是，像 push、pop、shift、unshift、splice、sort 和 reverse 这些修改数组的方法，它们直接修改数组本身，而不是修改数组的单个元素。

如果 Vue 不对这些方法进行特殊处理，那么直接调用它们将不会触发依赖更新，导致视图无法同步更新。这就是为什么 Vue 需要重写这些数组方法。

Vue 如何重写数组方法？

Vue 通过以下步骤来重写数组方法：

创建一个新的数组原型对象：这个新的原型对象继承自原始的数组原型对象，但重写了特定的方法。
拦截需要重写的方法：对于 push、pop 等方法，Vue 在新的原型对象中定义了同名的方法，这些方法会先执行原始的数组方法，然后再手动触发依赖更新。
替换数组的 __proto__ 属性：当一个数组变成响应式数组时，Vue 会将该数组的 __proto__ 属性指向新的原型对象。

下面是 Vue 中重写数组方法的核心代码的简化版本 (为了方便理解，这里做了简化，实际源码更复杂)：

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto); // 创建一个新的原型对象

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
];

methodsToPatch.forEach(function (method) {
  // 缓存原始方法
  const original = arrayProto[method];

  // 定义新的方法
  Object.defineProperty(arrayMethods, method, {
    enumerable: false,
    writable: true,
    configurable: true,
    value: function mutator(...args) {
      const result = original.apply(this, args); // 先执行原始方法
      const ob = this.__ob__; // 获取 Observer 实例 (每个响应式对象都有一个 __ob__ 属性)
      let inserted;
      switch (method) {
        case 'push':
        case 'unshift':
          inserted = args;
          break;
        case 'splice':
          inserted = args.slice(2);
          break;
      }
      if (inserted) {
        ob.observeArray(inserted); // 如果插入了新的元素，则将它们也变成响应式的
      }
      ob.dep.notify(); // 手动触发依赖更新
      return result;
    }
  });
});

这段代码的核心在于：

Object.create(arrayProto) 创建了一个新的原型对象，它继承了 Array.prototype 的所有属性和方法。
对于需要重写的方法，使用 Object.defineProperty 在新的原型对象上定义了新的方法，这些方法：
- 先调用原始的数组方法 original.apply(this, args)，确保数组的正常操作。
- 获取数组的 __ob__ 属性，这是一个指向 Observer 实例的引用。每个响应式对象 (包括数组) 都有一个 Observer 实例，负责管理依赖关系和触发更新。
- 如果插入了新的元素 (push, unshift, splice)，则调用 ob.observeArray(inserted) 将这些新元素也变成响应式的。
- 调用 ob.dep.notify() 手动触发依赖更新。dep 是一个 Dep 对象，负责管理该数组的所有依赖 (watcher 对象)。

`ob` 属性和 Observer

__ob__ 属性是一个非枚举属性，它指向 Observer 实例。Observer 的作用是：

将数据（包括对象和数组）转换为响应式数据。
负责依赖收集和派发。

当 Vue 将一个对象或数组转换为响应式数据时，它会创建一个 Observer 实例，并将该实例绑定到该对象或数组的 __ob__ 属性上。

Observer 的构造函数大致如下：

class Observer {
  constructor(value) {
    this.value = value;
    this.dep = new Dep(); // 每个 Observer 实例都有一个 Dep 实例，用于管理依赖
    def(value, '__ob__', this); // 将 Observer 实例绑定到 value 的 __ob__ 属性上 (def 是 Vue 内部的一个工具函数，用于定义不可枚举的属性)

    if (Array.isArray(value)) {
      // 如果是数组，则重写数组方法
      value.__proto__ = arrayMethods;
      this.observeArray(value); // 将数组中的每个元素也变成响应式的
    } else {
      // 如果是对象，则遍历对象的属性，将每个属性都变成响应式的
      this.walk(value);
    }
  }

  walk(obj) {
    const keys = Object.keys(obj);
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i]); // 将对象的每个属性都变成响应式的
    }
  }

  observeArray(items) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i]); // 将数组的每个元素都变成响应式的
    }
  }
}

可以看到，在 Observer 的构造函数中：

创建了一个 Dep 实例，用于管理依赖。
将 Observer 实例绑定到 value 的 __ob__ 属性上。
如果是数组，则将数组的 __proto__ 属性指向重写后的数组原型对象 arrayMethods，并调用 observeArray 将数组中的每个元素也变成响应式的。
如果是对象，则遍历对象的属性，并调用 defineReactive 将每个属性都变成响应式的。

`observe` 函数和 `defineReactive` 函数

observe 函数用于创建一个 Observer 实例，如果数据已经是一个响应式对象，则直接返回该对象的 Observer 实例：

function observe(value) {
  if (typeof value !== 'object' || value === null) {
    return;
  }
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    return value.__ob__;
  }
  return new Observer(value);
}

defineReactive 函数用于将对象的属性转换为响应式属性：

function defineReactive(obj, key) {
  let val = obj[key];
  let dep = new Dep(); // 每个属性都有一个 Dep 实例，用于管理依赖

  let childOb = observe(val); // 递归地将属性值变成响应式的

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      if (Dep.target) { // Dep.target 是一个全局变量，指向当前的 watcher 对象 (在渲染过程中会被赋值)
        dep.depend(); // 将当前的 watcher 对象添加到该属性的依赖列表中
        if (childOb) {
          childOb.dep.depend(); // 如果属性值也是一个响应式对象，则将当前的 watcher 对象添加到该属性值的依赖列表中
        }
      }
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) {
        return;
      }
      val = newVal;
      childOb = observe(newVal); // 将新的属性值变成响应式的
      dep.notify(); // 触发依赖更新
    }
  });
}

可以看到，在 defineReactive 函数中：

为每个属性创建了一个 Dep 实例，用于管理依赖。
使用 Object.defineProperty 定义了属性的 getter 和 setter。
在 getter 中，如果 Dep.target 存在（表示当前正在进行依赖收集），则将当前的 watcher 对象添加到该属性的依赖列表中。
在 setter 中，如果属性值发生了变化，则触发依赖更新。

依赖收集的触发时机

Dep.target 是一个全局变量，它指向当前的 watcher 对象。只有在渲染过程中，Dep.target 才会被赋值。

当 Vue 组件在渲染过程中访问响应式数据时，会触发该数据的 getter，从而执行 dep.depend() 方法，将当前的 watcher 对象添加到该数据的依赖列表中。

例如：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

在这个例子中，当 Vue 渲染 {{ message }} 时，会访问 message 属性，从而触发 message 属性的 getter，将当前的渲染 watcher 对象添加到 message 属性的依赖列表中。

代码演示：数组方法的重写效果

为了更直观地理解数组方法重写的效果，我们可以编写一个简单的例子：

<!DOCTYPE html>
<html>
<head>
  <title>Vue Array Mutation Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
    <button @click="addItem">Add Item</button>
    <button @click="removeItem">Remove Item</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        items: ['Item 1', 'Item 2', 'Item 3']
      },
      methods: {
        addItem() {
          this.items.push('New Item');
        },
        removeItem() {
          this.items.pop();
        }
      }
    });
  </script>
</body>
</html>

在这个例子中，我们有一个包含三个元素的数组 items，并使用 v-for 指令将数组中的每个元素渲染成一个列表项。

当我们点击 "Add Item" 按钮时，会调用 addItem 方法，该方法会调用 this.items.push('New Item') 向数组中添加一个新的元素。由于 Vue 重写了 push 方法，因此这个操作会触发依赖更新，导致视图同步更新，显示新的列表项。

当我们点击 "Remove Item" 按钮时，会调用 removeItem 方法，该方法会调用 this.items.pop() 从数组中移除最后一个元素。同样，由于 Vue 重写了 pop 方法，因此这个操作也会触发依赖更新，导致视图同步更新，移除最后一个列表项。

源码分析：Dep类和Watcher类

要彻底理解响应式系统，我们需要了解两个核心类：Dep 和 Watcher。

Dep (Dependency)：Dep 类负责管理依赖，每个响应式数据（对象的属性或数组）都有一个与之关联的 Dep 实例。Dep 实例维护着一个依赖列表，其中存储着所有依赖于该数据的 Watcher 对象。
Watcher：Watcher 类负责监听数据的变化，并在数据发生变化时执行回调函数。Vue 中有多种类型的 Watcher，例如渲染 Watcher、计算属性 Watcher 和用户 Watcher。

下面是 Dep 类的简化版本：

class Dep {
  constructor() {
    this.subs = []; // 存储依赖于该数据的 Watcher 对象
  }

  addSub(sub) {
    this.subs.push(sub);
  }

  removeSub(sub) {
    remove(this.subs, sub);
  }

  depend() {
    if (Dep.target) {
      Dep.target.addDep(this); // 将当前的 Watcher 对象添加到该 Dep 实例的依赖列表中
    }
  }

  notify() {
    // 遍历依赖列表，通知所有 Watcher 对象进行更新
    const subs = this.subs.slice();
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update();
    }
  }
}

// 全局变量，指向当前的 Watcher 对象
Dep.target = null;

function pushTarget(target) {
  Dep.target = target;
}

function popTarget() {
  Dep.target = null;
}

下面是 Watcher 类的简化版本：

class Watcher {
  constructor(vm, expOrFn, cb) {
    this.vm = vm;
    this.getter = expOrFn; // 用于获取数据的函数
    this.cb = cb; // 数据变化时的回调函数
    this.deps = []; // 存储该 Watcher 对象依赖的所有 Dep 实例
    this.newDeps = []; // 存储在本次更新过程中依赖的所有 Dep 实例
    this.depIds = new Set(); // 存储该 Watcher 对象依赖的所有 Dep 实例的 ID
    this.newDepIds = new Set(); // 存储在本次更新过程中依赖的所有 Dep 实例的 ID
    this.value = this.get(); // 初始值
  }

  get() {
    pushTarget(this); // 将当前的 Watcher 对象设置为 Dep.target
    const value = this.getter.call(this.vm, this.vm); // 执行 getter 函数，触发依赖收集
    popTarget(); // 将 Dep.target 重置为 null
    this.cleanupDeps(); // 清理不再依赖的 Dep 实例
    return value;
  }

  addDep(dep) {
    const depId = dep.id;
    if (!this.newDepIds.has(depId)) {
      this.newDepIds.add(depId);
      this.newDeps.push(dep);
      if (!this.depIds.has(depId)) {
        dep.addSub(this); // 将当前的 Watcher 对象添加到 Dep 实例的依赖列表中
      }
    }
  }

  cleanupDeps() {
    let i = this.deps.length;
    while (i--) {
      const dep = this.deps[i];
      if (!this.newDepIds.has(dep.id)) {
        dep.removeSub(this);
      }
    }
    let tmp = this.depIds;
    this.depIds = this.newDepIds;
    this.newDepIds = tmp;
    this.newDepIds.clear();
    tmp = this.deps;
    this.deps = this.newDeps;
    this.newDeps = tmp;
    this.newDeps.length = 0;
  }

  update() {
    queueWatcher(this); // 将 Watcher 对象添加到更新队列中，避免重复更新
  }

  run() {
    const oldValue = this.value;
    this.value = this.get(); // 重新获取数据
    this.cb.call(this.vm, this.value, oldValue); // 执行回调函数
  }
}

总结：数组方法重写是响应式更新的关键

通过重写数组方法，Vue 能够拦截对数组的修改操作，并在修改后手动触发依赖更新，从而确保视图能够同步更新。__ob__ 属性和 Observer 实例是实现这一机制的关键组成部分。理解这些概念对于深入理解 Vue 的响应式系统至关重要。
数组方法的重写，Observer和Dep的配合，使得数组的改变能够通知视图更新，保证数据的一致性。这是Vue响应式系统的基石之一。

更多IT精英技术系列讲座，到智猿学院

Vue 响应式系统中的数组方法重写：push/pop等操作如何触发依赖更新