在 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 source code 相同的，你会发现它检查属性是否有predefined getters or setters。

然后它会覆盖属性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) {
    //...
  }
});

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

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