Question

我的问题与Vue有关，更具体地说是与反应性和反应性吸气剂/阻气剂有关：https://vuejs.org/v2/guide/reactivity.html

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

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; 您会注意到，如果定义了一个吸气剂，它将被使用并返回其值。

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

在Vue组件中定义用户定义的吸气剂

1 个答案: