记录一下vue computed的实现

现在网上讲computed也有一些,但是举得例子感觉不是很清楚,导致自己的理解有一些偏差,今天

抽空看了一下源码,记录一下其中的要点

上一个例子

new Vue({
            el: "#app",
            template: "<div @click='clickHandler'>{{realName}}</div>",//这里只依赖了computed
            data: {
                name: "test"
            },
            computed: {
                realName: function () {
                    return this.name + 1
                }
            },
            methods: {
                clickHandler() {
                    this.name+=1
                }
            }
})

其实其他的方面都很简单,但是只有一个地方比较疑惑,当我们去点击的时候,this.name改变了,

但是我们的render没有直接去依赖data里面的name,页面确也重新显示了最新的值

所以这是怎么做到的呢,这就在于watcher.depend()这个函数的调用

当我们去调这个函数的时候,里面是这样的wacher.deps.forEach(dep=>{dep.depend()}),

这个dep其实就是装了这个computed Watcher的depend,例如我们的realName依赖了this.name,那么这个dep就是this.name的dep

然后我们去触发这个this.name的dep就将render watcher也放入到了this.name的dep中

这就相当于 render->this.realName->this.name,那么render wacher也被放到了this.name的dep中,当点击事件触发,this.name的dep进行了notify,之后自然就触发了render watcher,然后页面重新取值,进行了更新