详细阐述 Vue 2 的响应式系统原理（Object.defineProperty），并分析其优缺点和无法检测的变化类型。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，大家好！今天咱们来聊聊 Vue 2 的响应式系统，也就是那个基于 Object.defineProperty 的家伙。别怕，虽然名字听起来高大上，但其实没那么玄乎。我会尽量用大白话把它掰开了揉碎了讲清楚，保证你们听完之后，感觉自己也能去 Vue 源码里溜达一圈。

一、开场白：响应式是个啥玩意儿？

首先，咱得搞明白啥是响应式。简单来说，就是数据变了，页面上的东西也能跟着自动变。就像你玩游戏，血条扣了，屏幕上的血条也跟着少，这就是响应式。在 Vue 里，你修改了 data 里的数据，视图（也就是页面）会自动更新，这就是 Vue 的响应式系统在背后默默干活。

二、主角登场：Object.defineProperty

Vue 2 的响应式系统，核心就是 Object.defineProperty 这个 API。这玩意儿允许你定义一个对象属性的行为。你可以拦截对这个属性的读取（get）和设置（set）操作。

想象一下，你家有个保险箱（对象），Object.defineProperty 就像是你家的管家，站在保险箱旁边。

get (取钱): 你想从保险箱里拿钱（读取属性），管家会先偷偷记下谁要拿钱（收集依赖），然后才让你拿。
set (存钱): 你往保险箱里存钱（设置属性），管家会立刻通知所有之前想拿钱的人（触发更新），告诉他们：“喂喂喂，保险箱里有新钱了，快来看看要不要拿！”

这就是 Object.defineProperty 的基本工作原理。

三、Vue 2 响应式系统的实现细节

现在，咱们来深入了解一下 Vue 2 是怎么用 Object.defineProperty 实现响应式的。

数据劫持（Observer）:

Vue 会遍历你的 data 对象，用 Object.defineProperty 把每个属性都变成“可监控”的。这个过程叫做“数据劫持”。

function observe(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return; // 只处理对象
  }

  new Observer(obj);
}

class Observer {
  constructor(value) {
    this.value = value;
    this.walk(value); // 遍历对象属性
  }

  walk(obj) {
    Object.keys(obj).forEach(key => {
      defineReactive(obj, key, obj[key]); // 把每个属性变成响应式的
    });
  }
}

定义响应式属性（defineReactive）:

defineReactive 函数会把一个普通的属性变成响应式的。它会为每个属性创建一个 Dep 对象（依赖管理器），用来收集依赖和触发更新。

function defineReactive(obj, key, val) {
  const dep = new Dep(); // 每个属性都有一个依赖管理器

  observe(val); // 递归处理嵌套对象

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      if (Dep.target) {
        // 正在收集依赖
        dep.depend(); // 把当前的 watcher 添加到依赖列表中
      }
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) {
        return;
      }
      val = newVal;
      observe(newVal); // 如果新值是对象，也要变成响应式的
      dep.notify(); // 通知所有依赖更新
    }
  });
}

依赖收集（Dep & Watcher）:

Dep (依赖管理器): 负责收集依赖（Watcher），并在数据变化时通知它们。
Watcher (观察者): 负责监听数据的变化，并在数据变化时执行更新函数。当 Vue 在渲染组件时，会创建一个 Watcher 实例，这个 Watcher 会读取组件需要用到的数据。在读取数据的过程中，reactiveGetter 会被触发，Dep.target 会指向当前的 Watcher，dep.depend() 会把当前的 Watcher 添加到 Dep 的依赖列表中。

class Dep {
  constructor() {
    this.subs = []; // 依赖列表
  }

  depend() {
    if (Dep.target) {
      // Dep.target 指向当前的 watcher
      this.addSub(Dep.target);
    }
  }

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

  notify() {
    this.subs.forEach(sub => {
      sub.update(); // 执行更新函数
    });
  }
}

Dep.target = null; // 当前的 watcher

class Watcher {
  constructor(vm, expOrFn, cb) {
    this.vm = vm;
    this.getter = expOrFn; // 获取值的函数
    this.cb = cb; // 更新函数
    this.value = this.get(); // 初始值
  }

  get() {
    Dep.target = this; // 把当前的 watcher 设置为 Dep.target
    const value = this.getter.call(this.vm, this.vm); // 读取数据，触发 getter
    Dep.target = null; // 清空 Dep.target
    return value;
  }

  update() {
    const oldValue = this.value;
    this.value = this.get();
    this.cb.call(this.vm, this.value, oldValue); // 执行更新函数
  }
}

触发更新（notify）:

当数据发生变化时，reactiveSetter 会被触发，它会调用 dep.notify()，通知所有依赖这个数据的 Watcher 执行更新函数。Watcher 会重新读取数据，并执行相应的更新操作，从而更新视图。

四、代码示例：一个简单的响应式对象

为了更好地理解，咱们来写一个简单的例子，模拟 Vue 2 的响应式系统。

class Dep {
  constructor() {
    this.subs = [];
  }
  depend() {
    if (Dep.target) {
      this.subs.push(Dep.target);
    }
  }
  notify() {
    this.subs.forEach(sub => sub());
  }
}

function defineReactive(obj, key, val) {
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    get() {
      dep.depend();
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        val = newVal;
        dep.notify();
      }
    }
  });
}

function observe(obj) {
  Object.keys(obj).forEach(key => defineReactive(obj, key, obj[key]));
}

// 模拟 Vue 实例
const vm = {
  data: {
    name: '张三',
    age: 18
  }
};

observe(vm.data);

// 模拟 Watcher
const watcher = (cb) => {
  Dep.target = cb;
  vm.data.name; // 触发 get，收集依赖
  Dep.target = null;
};

// 注册 Watcher，当 name 变化时执行回调
watcher(() => {
  console.log('name 变化了，新的 name 是：', vm.data.name);
});

// 修改 name，触发更新
vm.data.name = '李四'; // 控制台输出：name 变化了，新的 name 是： 李四

五、Object.defineProperty 的优缺点

Object.defineProperty 虽然是 Vue 2 响应式系统的基石，但它也有自己的优缺点。

优点	缺点
简单易懂：相对 Proxy 来说，更容易理解和实现。	只能监听属性：无法监听对象的新增/删除属性，也无法监听数组的变化。
兼容性好：在 IE9+ 的浏览器上都可以使用。	需要遍历对象：需要遍历整个对象，为每个属性都设置 `getter` 和 `setter`，性能开销较大。
可以精确控制属性的行为：可以精确地控制属性是否可枚举、可配置等。	深度监听需要递归：需要递归遍历嵌套对象，为每个属性都设置 `getter` 和 `setter`，性能开销更大，也更容易导致栈溢出。

六、Object.defineProperty 无法检测的变化类型

由于 Object.defineProperty 只能监听属性的读取和设置，所以它无法检测到以下几种变化：

新增属性：

vm.data.newProperty = '新属性'; // 无法触发更新

删除属性：

delete vm.data.age; // 无法触发更新

数组的索引修改：

vm.data.arr = [1, 2, 3];
vm.data.arr[0] = 4; // 无法触发更新

直接修改数组的长度：

vm.data.arr.length = 1; // 无法触发更新

七、Vue 2 如何解决无法检测的变化

为了解决 Object.defineProperty 无法检测的变化，Vue 2 提供了一些特殊的 API：

Vue.set(object, key, value) / this.$set(object, key, value)： 用于给对象新增属性，并触发更新。

Vue.set(vm.data, 'newProperty', '新属性'); // 可以触发更新
this.$set(this.data, 'newProperty', '新属性'); // 也可以触发更新

Vue.delete(object, key) / this.$delete(object, key)： 用于删除对象的属性，并触发更新。

Vue.delete(vm.data, 'age'); // 可以触发更新
this.$delete(this.data, 'age'); // 也可以触发更新

重写数组的几个方法： Vue 重写了数组的 push、pop、shift、unshift、splice、sort、reverse 这七个方法，当这些方法被调用时，Vue 会手动触发更新。

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);

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

methodsToPatch.forEach(function (method) {
  // cache original method
  const original = arrayProto[method];
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args);
    const ob = this.__ob__;
    let inserted;
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args;
        break
      case 'splice':
        inserted = args.slice(2);
        break
    }
    if (inserted) {
      ob.observeArray(inserted);
    }
    // notify change
    ob.dep.notify();
    return result
  });
});

当你使用这些方法修改数组时，Vue 就能检测到变化，并触发更新。

八、Vue 3 的响应式系统：Proxy

Vue 3 使用了 Proxy 来实现响应式系统。Proxy 提供了更强大的功能，可以监听对象的所有操作，包括属性的读取、设置、新增、删除，以及 has、deleteProperty 等操作。

Proxy 的优点：

可以监听所有操作： 可以监听对象的新增/删除属性，也可以监听数组的变化。
性能更好： 不需要遍历整个对象，只需要在需要的时候才进行拦截。
支持更多操作： 支持 has、deleteProperty 等操作。

Proxy 的缺点：

兼容性较差： 在 IE 浏览器上不支持。

九、总结

Vue 2 使用 Object.defineProperty 实现响应式系统，虽然有一些局限性，但通过一些特殊的 API，也能够很好地解决这些问题。Vue 3 使用 Proxy 实现响应式系统，提供了更强大的功能和更好的性能。

总的来说，理解 Vue 的响应式系统，可以帮助你更好地理解 Vue 的工作原理，也能让你在开发过程中更好地利用 Vue 的特性。

好了，今天的讲座就到这里。希望大家有所收获！如果还有啥不明白的，欢迎提问！咱们下次再见！

发表回复 取消回复

发表回复取消回复