在Vue组件中定义用户定义的getter

data

例如,考虑

data:{
  foo: 'hello world',
  bar: 3
}

let key = Object.keys(data)

for (let i = 0; i < keys.length; i++) {
  let val = data[keys[i]];
  Object.defineProperty(data, keys[i], {
    get(){
      // add this property as a dependency when accessed
      return val;
    },
    set(newVal){
      //notify for a change
      val = newVal;
    }
  })
}

source code predefined getters or setters .

Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter() {
    const value = getter ? getter.call(obj) : val;
    if (Dep.target) {
      dep.depend();
      if (childOb) {
        childOb.dep.depend();
        if (Array.isArray(value)) {
          dependArray(value);
        }
      }
    }
    return value;
  },
  set(newVal) {
    //...
  }
});

line const value = getter ? getter.call(obj) : val;

Vue只是在做更多的工作,通过调用一些与依赖相关的方法来使它们成为反应性的。