Vue 可以响应数据变化,数据变化后会自动更新视图,如果每次修改都触发视图更新,会导致多次重复和不必要的渲染操作,例如一个组件使用了两个 data 的属性,更新两个属性如果触发两次渲染的话,会影响性能。因此 Vue 采取异步更新。
每次更新响应的属性之后,会将渲染的 Watcher 放到一个队列中,在下个事件循环中再执行。当数据变化后,把 watcher.update 函数存放进 nextTick 的回调数组中,并且会做过滤。通过 wachter 的 id 来判断回调数组中是否已经存在这个 watcher 的更新函数不存在,才 push。之后调用 nextTick 时遍历回调数组,便会执行了更新。
所以,不管你修改多少次数据,nextTick 的回调数组中只存在唯一一个 watcher.update,从而页面只会更新一次。