响应式就是 组件data的数据一旦发生变化，立刻触发视图的更新。

Vue2.x 中使用 Object.defineProperty 实现响应式，Object.defineProperty 存在一些缺点（后面会提到），因此 Vue3.0 中改用 Proxy 实现响应式。虽然 Vue3.0 来了，但是目前也不可能完全舍弃 Object.defineProperty，因为 Proxy 的兼容性不好，且无法使用 polyfill，Vue2.x 肯定还会存在一段时间，因此我们还是需要好好学习 Vue2.x 中是如何实现响应式的。

前面提到，Vue2.x 实现响应式的核心 API 是 Object.defineProperty。因为访问器属性不能直接定义，必须使用 Object.defineProperty 方法。这个方法接收三个参数：属性所在对象、属性的名字、一个描述符对象。看一个例子：

var book = {
  _year: 2021 // _是一种常见的记号，用于表示只能通过对象方法访问到的属性
};

Object.defineProperty(book, 'year', {
  get: function() {
    return this._year;
  },
  set: function(newValue) {
    if (newValue > 2021) {
      this._year = newValue;
    }
  }
})

book.year = 2010;
console.log(book.year); // 2021

首先看一下如何监听对象：

// 更新视图入口函数（这里并没有真正的更新，只是为了做演示）
function updataView() {
  console.log('视图更新');
}

// 封装Object.defineProperty
function defineReactive(target, key, value) {
  Object.defineProperty(target, key, {
    get:function() {
      return value;
    },
    set: function(newVal) {
      if (newVal != value) {
        value = newVal;

        // 触发视图更新
        updataView();
      }
    }
  })
}

// 监听对象属性
function observer(target) {
  if (typeof target !== 'object' || target === null) {
    // 不是数组或者对象
    return target;
  }

  // 追踪各个属性(for in 也可以遍历数组)
  for(let key in target) {
    defineReactive(target, key, target[key])
  }
}

// 准备数据
const data = {
  name: 'lily',
  age: 20,
  info: {
    address: '北京'
  }
}

// 监听数据
observer(data);

// 测试
data.name = 'tom'; // 输出“视图更新”
data.age = 24; //  输出“视图更新”
data.x = 100; // 监听不到新增属性
delete data.name; // 监听不到删除属性
data.info.address = '上海' // 监听不到，需要深度监听才行

以上可以对数据对象进行浅监听。我们发现这个这个方式无法监听到新增属性和删除属性，这是 Object.defineProperty 的缺点之一（因此 Vue 中 还提供了 Vue.set 和 Vue.delete）。

以上代码无法深度监听，但是我们只需要改造以下 defineReactive 函数，就可以实现深度监听：

再测试一下：

// 准备数据
const data = {
  info: {
    address: '北京'
  },
  nums: [1, 2, 3]
}

// 监听数据
observer(data);

// 测试
data.info.address = '上海' // 输出“视图更新”
data.nums.push(4) // 监听不到数组

我们递归地对对象进行监听，这样就实现了深度监听。这里也就可以看出 Object.defineProperty 的第二个缺点：深度监听是需要递归到底，一次性计算量很大。

Object.defineProperty 的第三个缺点是无法原生监听数组，如果要监听数组，需要再进行特殊处理。具体方式如下：

// 重新定义数组原型
const oldArrayPrototype = Array.prototype;
// 创建新对象，原型指向oldArrayProperty，再扩展新的方法不会影响原型
const arrProto = Object.create(oldArrayPrototype);
// 数组不止这些方法，在这里只列出来了这些
['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
  arrProto[methodName] = function() {
    // 触发视图更新
    updataView();
    // 调用数组原型上的方法
    oldArrayPrototype[methodName].call(this, ...arguments)
  }
})

再改造一下 observer 函数：

// 监听对象属性
function observer(target) {
  if (typeof target !== 'object' || target === null) {
    // 不是对象或数组
    return target
  }

  // 不能这样！这样会污染全局的 Array 原型
  // Array.prototype.push = function () {
  //     updateView()
  //     ...
  // }

  // 更改数组原型
  if (Array.isArray(target)) {
    target.__proto__ = arrProto
  }

  // 重新定义各个属性（for in 也可以遍历数组）
  for (let key in target) {
    defineReactive(target, key, target[key])
  }
}

一定不可以直接修改 Array 原型！这样会造成全局的 Array 原型被污染！因此我们才需要重新定义一个数组原型。此时就可以实现对数组的监听了。

总结一下

Object.defineProperty 的缺点总结：① 深度监听，需要递归到底，一次性计算量大；② 无法监听新增属性、删除属性（所以有 Vue.set、Vue.delete）；③ 无法原生监听数组，需要特殊处理。

实现深度监听对象与监听数组的完整代码如下：

// 更新视图入口函数（这里并没有真正的更新，只是为了做演示）
function updataView() {
  console.log('视图更新');
}

// 重新定义数组原型
const oldArrayPrototype = Array.prototype;
// 创建新对象，原型指向oldArrayProperty，再扩展新的方法不会影响原型
const arrProto = Object.create(oldArrayPrototype);
// 数组不止这些方法，在这里只列出来了这些
['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
  arrProto[methodName] = function() {
    // 触发视图更新
    updataView();
    // 调用数组原型上的方法
    oldArrayPrototype[methodName].call(this, ...arguments)
  }
})

// 封装Object.defineProperty
function defineReactive(target, key, value) {
  // 深度监听
  observer(value)

  Object.defineProperty(target, key, {
    get: function () {
      return value;
    },
    set: function (newVal) {
      if (newVal != value) {
        // 深度监听
        observer(value)

        value = newVal;

        // 触发视图更新
        updataView();
      }
    }
  })
}

// 监听对象属性
function observer(target) {
  if (typeof target !== 'object' || target === null) {
    // 不是数组或者对象
    return target;
  }
  
  if (Array.isArray(target)) {
    target.__proto__ = arrProto;
  }

  // 追踪各个属性(for in 也可以遍历数组)
  for (let key in target) {
    defineReactive(target, key, target[key])
  }
}

// 准备数据
const data = {
  name: 'lily',
  age: 20,
  info: {
    address: '北京'
  },
  nums: [1, 2, 3]
}

// 监听数据
observer(data);

// 测试
data.name = 'tom' // 输出“视图更新”
data.info.address = '上海' // 输出“视图更新”
data.nums.push(4) // 输出“视图更新”