Vue.js 计算属性的秘密

      计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行。

      上述代码会源源不断的打印出 b 的值。如果希望 a 依赖 data 中的 x 而变化,只需保证 a 函数中有 this.x 即可。如果函数中没有出现 data 中的属性,那么无论 data 中的属性怎么变,a 对应的函数一次也不会执行。

      Vue 怎么知道计算属性在函数中引用了哪个 data 属性?这个函数又是怎么知道 data 属性变了,而且只关心它内部引用的那个属性,别的都不管?

      官方文档对计算属性的描述是:

      文档的描述让我的困惑更加困惑,还有这种操作?这特么是怎么做到的?

      Google 了一把,看了一篇三哥的博文(见文末),豁然开朗。

      我们简单模拟实现一个计算属性:a 变化时,b 自动跟着变化。

      由于涉及 Vue 的响应式绑定的原理,如果你对此不熟,最好先看看《Vue.js 双向绑定的实现原理》

      少啰嗦,先看过程:

      1. 首先 b 属性会被处理为存取器属性,访问 b 就会触发其 get 函数

      2. 处理计算属性 a 时,会执行 a 的函数,从而会执行 this.b,于是触发 b 的 get 函数

      3. b 的 get 函数会添加 b 属性的依赖项,而刚才在处理计算属性过程中,a 已经作为依赖项被传给了一个全局变量,b 的 get 函数会检测到这个全局变量,并将其添加到自身的订阅者列表中

      4. 对 b 赋予新的值时,会触发其 set 函数,set 函数中会遍历执行订阅者,a 的值就是在这个时候更新的

      再看代码:

(注:图中数字仅作思路引导,并非与前文过程描述对应)

      测试一下,完美打印出 1, 2, 3, 4

      console.log(obj.b)

      obj.a += 1;

      console.log(obj.b);

      obj.a += 1;

      console.log(obj.b);

      obj.a += 1;

      console.log(obj.b);

     

      通过对存取器属性、闭包和观察者模式的综合运用,Vue 巧妙的实现了计算属性。现在再看官方文档描述,是不是更通透了呢。

      可以看出,Vue 响应式系统的核心理念是“依赖”,DOM 节点之所以随数据而变化,是因为节点依赖于数据,计算属性之所以随数据而变化,是因为计算属性依赖于数据。做好响应式的关键就在于处理好依赖关系。

 

参考文章:https://skyronic.com/blog/vuejs-internals-computed-properties

posted @ 2017-08-17 22:45 kidney 阅读(...) 评论(...) 编辑 收藏