美文网首页
5.Vue中computed实现原理

5.Vue中computed实现原理

作者: winzhyming | 来源:发表于2019-03-14 19:55 被阅读0次

    1.初始化 data 和 computed,分别代理其 set 和 get 方法,对 data 中的所有属性生成唯一的 dep 实例

    2.对 computed 中的 属性生成唯一的 watcher,并保存在 vm._computedWatchers 中

    3.访问计算属性时,设置 Dep.target 指向 计算属性的 watcher,调用该属性具体方法

    4.方法中访问 data 的属性,即会调用 data 属性的 get 方法,将 data 属性的 dep 加入到 计算属性的 watcher , 同时该 dep 中的 subs 添加这个 watcher

    5.设置 data 的这个属性时,调用该属性代理的 set 方法,触发 dep 的 notify 方法

    6.因为时 computed 属性,只是将 watcher 中的 dirty 设置为 true

    7.最后,访问计算属性的 get 方法时,得知该属性的 watcher.dirty 为 true,则调用 watcher.evaluate() 方法获取新的值

    综合以上:也可以解释了为什么有些时候当computed没有被访问(或者没有被模板依赖),当修改了this.data值后,通过vue-tools发现其computed中的值没有变化的原因,因为没有触发到其get方法。

    相关文章

      网友评论

          本文标题:5.Vue中computed实现原理

          本文链接:https://www.haomeiwen.com/subject/ypthmqtx.html