Vue监视数据原理

• 1.前置知识

Vue监视数据的原理实现

1.前置知识

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

?

1 2 3 4 5

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
});//访问器描述符