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