Vue2源码学习笔记 - 7.响应式原理一基础

这一节开始我们来研究学习 Vue 的重中之重——响应式原理。响应式机制也是 mvvm 中的核心组成部分。Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新，这使得状态管理非常简单直接。

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。这个机制在其他语言里也有类似的，比如 PHP 里的魔术方法 __set 和 __get 与此就非常类似；Java 中的 getXXX\setXXX 与微信小程序里的 setData 虽然也类似，但是差别就比较大了。Java 应该还有更接近 Object.defineProperty 的实现，毕竟有 CGLib 这类这么强大的工具存在，这个算是题外话只提一下，有兴趣的可以自行去查阅研究。

每个 Vue 组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

Object.defineProperty

Object.defineProperty 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象，写个简单的 demo 看看它的使用，它的具体文档可见 MDN。

function App() {
  // 初始变量
  this.data = {
    id: 0,
    name: 'hello'
  };

  // 实际变量对象
  this._data = {};
}

function defineReactive(target, key, val) {
  // 设置初始默认值
  target._data[key] = val;

  // Object.defineProperty 定义响应式属性
  Object.defineProperty(target, key, {
    get: function() {                       // 定义 getter
      // 触发引用，todo something
      return '['+this._data[key]+']';
    },
    set: function(newValue) {               // 定义 setter
      // 触发更新，todo something
      console.log(`update key: ${key}, oldVal: ${this._data[key]}, newVal: ${newValue}`)
      this._data[key] = newValue;
    },
    enumerable: true,
    configurable: true
  });
}

// 1. 实例化app
var app = new App();

// 2. 遍历 app.data 的 key 调用defineReactive 设置为 app上的响应式属性
for(key in app.data) {
  defineReactive(app, key, app.data[key]);
}

// 3. 更改前
console.log(app);
console.log(`1. id: ${app.id}, name: ${app.name}`);

// 4. 更新值
app.id = 999;
app.name = 'js';

// 5. 更改后
console.log(`2. id: ${app.id}, name: ${app.name}`);
console.log(app);

输出

在这个 demo 中，经 defineReactive 响应式设置后可以直接通过 app.id 和 app.name 访问定义在 data 中的属性，而且它们的设值会触发调用 setter 和引用值触发调用 getter，在这些方法中可以做些比如更新通知和依赖收集等你希望的操作。这个 defineReactive 依赖于 Object.defineProperty，它就是响应式原理的核心。

Proxy

除了 Object.defineProperty，在 ES2015 中还定义了另一个类 Proxy，用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。我们仍然写一个简单的 demo 看看它的使用，它的具体文档可见 MDN。

// 1. 定义数据
var data = {
  id: 123,
  name: 'hello'
};

// 2. 初始化 Proxy
data = new Proxy(data, {
  get: function(obj, key) {                       // 定义 getter
    // 触发引用，todo something
    return '['+obj[key]+']';
  },
  set: function(obj, key, newValue) {               // 定义 setter
    // 触发更新，todo something
    console.log(`update key: ${key}, oldVal: ${obj[key]}, newVal: ${newValue}`)
    obj[key] = newValue;
  }
});

// 3. 更改前
console.log(`1. id: ${data.id}, name: ${data.name}`);

// 4. 更新值
data.id = 999;
data.name = 'js';

// 5. 更改后
console.log(`2. id: ${data.id}, name: ${data.name}`);

输出

可以看见通过 Proxy 实现的响应式数据也很便捷，同 Object.defineProperty 类似，在对数据的更新和引用时也会调用相应的 setter/getter 方法。Vue2 也有使用 Proxy，不过用到的地方不多，我们这里只做简单的研究。需要注意的是 Proxy 也是原生自带的类，它也无法被 shim 实现。

总结：

这一节我们大概学习下响应式底层调用的核心方法 Object.defineProperty 和 Proxy 类，它们虽然不同，但是无非都是在更新和引用的时候触发特点的方法 setter/getter，似乎也可以称为钩子方法，在执行这些方法时去做一些希望的操作来实现响应式。下一篇我们继续深入 Vue 的响应式实现。