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

来源：5-2 计算属性 VS 侦听属性（2）

月上云流

2020-01-26

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

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

写回答

2回答

月上云流

提问者

2020-01-26

老师我懂了。。。

原来是 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
        }
    }
}

我这样理解对吗？

慕神9104124

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

2021-06-06

共2条回复