通过图带你深入了解vue的响应式原理(2)

var app = new Vue({ el: '#app', data: { message: '1', message1: '2', }, methods: { changeMessage() { this.message = '3' } }, watch: { message: function(val) { this.message1 = val } } })

依赖收集的最终结果：

当触发click事件的时候，便会触发订阅更新流程。

订阅更新流程图：

当renderWatch执行更新的时候，回去调用beforeUpdate生命钩子，然后执行patch方法，进行视图的变更。

如何防止重复更新

如何去防止重复更新呢？renderWatch会被很多dep进行收集，如果视图多次渲染，会造成性能问题。

其实问题的关在在于——queueWatcher

在queueWatcher中有两个操作：去重和异步更新。

function queueWatcher (watcher) { const id = watcher.id if (has[id] == null) { has[id] = true queue.push(watcher) // ... if (!waiting) { waiting = true // ... nextTick(flushSchedulerQueue) } } }

其实queueWatcher很简单，将所有watch收集到一个数组当中，然后去重。

这样至少可以避免renderWatch频繁更新。

比如上述例子中的，message和message1都有一个renderWatch，但是只会执行一次。

异步更新也可以保证当一个事件结束之后，才会触发视图层的更新，也能防止renderWatch重复更新

结尾

文章讲述了响应式流程的原因，代码细节并未深入，