Vue监视数据原理

Vue监视数据的原理实现

1.前置知识

有一个方法 Object.defineProperty(obj, descriptors)，允许一次定义多个属性。

Object.defineProperty(obj, {
  prop1: descriptor1,
  prop2: descriptor2
  // ...
});

这个方法允许精确的添加和修改对象的蜀绣，通常会和Object.keys()方法联合使用。Object.defineProperty()有两种访问描述符，一种是数据描述符，就是具有值的属性，一种是访问器描述符，是由一对 getter-setter 函数描述的属性。

var o = {};
Object.defineProperty(o, 'a', {
  value: 37,
  writable: true,
  enumerable: true,
  configurable: true
});//数据描述符
var bValue = 38;
Object.defineProperty(o, 'b', {
  // Using shorthand method names (ES2015 feature).
  // This is equivalent to:
  // get: function() { return bValue; },
  // set: function(newValue) { bValue = newValue; },
  get() { return bValue; },
  set(newValue) { bValue = newValue; },
  enumerable: true,
  configurable: true
});//访问器描述符