最新版本的 computed 值发生变化之后是如何触发重新渲染的呢？

Question

老师，最新版本的 computed 值发生变化之后是如何触发重新渲染的呢？

我在源码中只看到了computed watcher 依赖的响应对象在触发他们的 set 之后会执行 dep.notify 进而执行 computed watcher 自身的 update，而 update (因为 watcher.lazy 为 true) 仅仅是将 watcher.dirty (我理解为缓存flag) 变成 true 而已，也就是下次取watcher.value的值就要重新计算而已，并没有代码去重新渲染视图或者触发 渲染watcher 的 update 啊

Answer 1

提问者 月上云流 2020-01-26 12:50:09

老师我懂了。。。

原来是 computed watcher 收集完依赖之后又将这些依赖全部放到了渲染 watcher 中，这样就会同时出发computed值的更新和重新渲染了，这个藏得好深啊

function createComputedGetter (key) {
    return function computedGetter () {
        const watcher = this._computedWatchers && this._computedWatchers[key]
        if (watcher) {
            if (watcher.dirty) {
                watcher.evaluate()
                // 这一步Dep.target是这个computed watcher，完成了依赖收集，然后因为执行了popTarget，Dep.target 变回了渲染watcher
            }
            if (Dep.target) {
                watcher.depend()
                // 这一步将刚才收集的依赖又添加到了渲染watcher中
            }
            return watcher.value
        }
    }
}

我这样理解对吗？

• ustbhuangyi #1

  你说的没错，就是这么玩的

• 慕神9104124 #2

  在computed的依赖响应式对象改变后，会dep.notify()所有订阅的watcher，包括computed watcher与组件渲染watcher，在update computed watcher时，将this.dirty 置为true，在下次getter 函数内重新计算computed的value，在update 组件渲染watcher后，会调用updateComponent，在nextTick后重新渲染，这样数据在视图中就发生变化

Answer 2

慕斯1307019 2021-07-07 23:40:19

插个眼，现在还是有点迷，等下再回来看看