vue异步更新
2022-04-15 18:19:05 6 举报AI智能生成
vue异步更新
作者其他创作
大纲/内容
<span style="font-size: inherit;">入口</span><br><span style="font-size: inherit;">core/observer/index.js</span><br>
defineReactive方法的setter里的<br>dep.notify()通知更新
core\observer\watcher.js <br>
<b>update()</b> dep.notify()之后watcher执⾏更新，执⾏⼊队操作 <br>
core\observer\scheduler.js <br>
<b>queueWatcher(watcher)</b> 执⾏watcher⼊队操作
core\util\next-tick.js <br>
<b>nextTick(flushSchedulerQueue)</b> nextTick按照特定异步策略执⾏队列操作 <br>
nexttick利用promise创建微任务（如果浏览器不支持则使用别的方法）
具体实现<br>
<b>异步</b>：只要侦听到数据变化，Vue 将开启⼀个队列，<br>并缓冲在同⼀事件循环中发⽣的所有数据变更。 <br>
<b>批量</b>：如果同⼀个 watcher 被多次触发，只会被推⼊到队列中⼀次。<br>去重对于避免不必要的计算 和 DOM 操作是⾮常重要的。<br>然后，在下⼀个的事件循环“tick”中，Vue 刷新队列执⾏实际⼯作。
<b>异步策略</b>：Vue 在内部对异步队列尝试使⽤原⽣的 Promise.then、<br>MutationObserver 或setImmediate，<br>如果执⾏环境都不⽀持，则会采⽤ setTimeout 代替
0 条评论
下一页
