vue异步渲染

Posted 2023-04-18

参考技术A vue是组件级更新，当数据更改一次组件就要重新渲染一次，性能不高，为了防止数据一更新就更新组件，所以做了个异步更新渲染。（核心的方法就是nextTick）

分析：
当数据变化后会调用notify方法，将watcher遍历，调用update方法通知watcher进行更新，这时候watcher并不会立即去执行，在update中会调用queueWatcher方法将watcher放到了一个队列里，在queueWatcher会根据watcher的进行去重，多个属性依赖一个watcher，如果队列中没有该watcher就会将该watcher添加到队列中，然后通过nextTick异步执行flushSchedulerQueue方法刷新watcher队列。flushSchedulerQueue中开始会触发一个before的方法，其实就是beforeUpdate，然后watcher.run() 才开始真正执行watcher，执行完页面渲染完成，更新完成后调用updated。

为何vue采用异步渲染

理解：

如果不采取异步更新，那么每次更新数据都会对当前组件进行重新渲染，为了性能考虑，Vue 会在本轮数据更新后，再去异步更新数据。

原理：

dep.notify() 通知 watcher 进行更新操作
-->subs[i].update() 依次调用 watcher 的 update
-->queueWatcher 将 watcher 重新放到队列中
-->nextTick(flushSchedulerQueue) 异步清空 watcher 队列