vue异步更新
2020-07-07 23:28:57 73 举报AI智能生成
Vue异步更新是Vue.js框架中的一个重要特性，它允许数据在被访问和修改时不是立即更新，而是将这个操作放入一个队列中，然后在合适的时机一次性执行所有的更新操作。这种方式可以有效地减少不必要的DOM操作，提高应用的性能。同时，由于所有的更新操作都是异步的，所以用户不会看到正在进行的数据更新过程，从而提高了用户体验。此外，Vue还提供了一些工具和方法来控制和管理这个异步更新过程，例如使用`nextTick`方法来确保在下次DOM更新前执行某些操作。总的来说，Vue的异步更新机制是一种强大的工具，可以帮助开发者更有效地管理和控制数据的更新过程。
作者其他创作
大纲/内容
this.b = 123
数据修改触发响应式 observe的
defineReactive 配置中 set 执行
vue\src\core\observer\index.js
数据修改触发响应式 observe的
defineReactive 配置中 set 执行
vue\src\core\observer\index.js
set 对应的 Dep 通知 (notify )
执行 watcher 的update方法
vue\src\core\observer\dep.js
执行 watcher 的update方法
vue\src\core\observer\dep.js
update 将 当前的watcher 推入queueWatcher队列中
vue\src\core\observer\watcher.js
vue\src\core\observer\watcher.js
queueWatcher 对于同一属性的只会添加一次
通过has算法去重
使用异步更新nextTick方法准备执行更新watcher
vue\src\core\observer\scheduler.js
通过has算法去重
使用异步更新nextTick方法准备执行更新watcher
vue\src\core\observer\scheduler.js
nextTick方法中 timerFunc 对微任务进行兼容处理
进入微任务后执行回调方法此时的回调方法为 flushSchedulerQueue
vue\src\core\util\next-tick.js
进入微任务后执行回调方法此时的回调方法为 flushSchedulerQueue
vue\src\core\util\next-tick.js
flushSchedulerQueue
对队列中的watcher.id进行 小-》大的排序
之后循环执行队列中的watcher
vue\src\core\observer\scheduler.js
对队列中的watcher.id进行 小-》大的排序
之后循环执行队列中的watcher
vue\src\core\observer\scheduler.js
this.a.c =456
一个对象新增属性那么会递归执行 observe
则会生成一个新的子 watcher
vue\src\core\observer\index.js
一个对象新增属性那么会递归执行 observe
则会生成一个新的子 watcher
vue\src\core\observer\index.js
进入queueWatcher时 队列已经进入到微任务中等待
因此，只需将新的watcher推入队列即
可
vue\src\core\observer\scheduler.js
因此，只需将新的watcher推入队列即
可
vue\src\core\observer\scheduler.js
等待主线程进入微任务执行回调即可
0 条评论
下一页
