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

Question

我的问题涉及 Vue，更具体地说是反应性和反应性 getter/setter：https : //vuejs.org/v2/guide/reactivity.html

我可以在 Vue 组件中定义自己的 getter，当 Vue 添加自己的反应式 getter 时，它们会发生什么？

Answer 1

Vue 将遍历其所有属性并使用 Object.defineProperty 将它们转换为 getter/setter

上面这句话的意思是 vue 迭代你data选项中的每个属性，使它们具有反应性。

例如，考虑您的data选择是：

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

vue 将覆盖data对象如下（只是一个抽象的描述）：

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;
    }
  })
}

如果您查看相同的 vue源代码，您会发现它检查属性是否具有预定义的 getter 或 setter。

然后它覆盖属性 getter 如下：

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) {
    //...
  }
});

如果你看到这一行， const value = getter ? getter.call(obj) : val; 你会注意到如果你定义了一个 getter，它正在被使用并且它的值被返回。

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