从 vue 源码看问题 — vue 如何进行异步更新？

前言

在上一篇 如何理解 vue 响应式？ 中，了解到响应式其实是通过 Observer 类中调用 defineReactive() 即 Object.defineProperty() 方法为每个目标对象的 key（key 对应的 value 为非数组的） 设置 getter 和 setter 实现拦截，分别进行 依赖收集 和 依赖更新通知，而 vue 的异步更新就在 setter 中的 dep.notify() 之后进行开启.

深入源码

下面针对源码的解读内容都在源码对应截图的注释中，就不在进行单独描述.

dep.notify() 方法

watcher.update() 方法

queueWatcher() 方法

flushSchedulerQueue() 方法

watcher.run() 方法

watcher.get() 方法

nextTick() 方法

timerFunc() 方法

timerFunc() 其实就是利用了浏览器的异步任务队列去执行 flushCallbacks() 方法，这整个过程其实就是 优雅降级：

• 首先判断当前环境是否支持 Promise，如果支持，就用 Promise 来触发回调函数
• 如果不支持 Promise 就判断是否支持 MutationObserver，通过观察文本节点发生变化，去触发执行异步回调函数
• 如果不支持 MutationObserver 就判断是否支持 setImmediate，如果支持，就通过 setImmediate 来触发回调函数
• 如果以上都不支持就只能用 setTimeout 来完成异步执行

关于 Promise、MutationObserver、浏览器异步任务 等内容如果你还不算足够了解，那么在文末会给出的对应文章链接以提供大家去学习和深入了解.

flushCallbacks() 方法

flushCallbacks() 方法会去清空 callbacks 数组并执行所有在 nextTick() 中保存的函调函数.

总结

vue 中如何实现异步更新？

vue 中的异步更新机制主要是利用了 浏览器的异步任务队列 来实现的，首选 微任务队列，其次选 宏任务队列。

当响应式数据发生更改后，会在 setter 中调用 dep.notify 方法，通知 dep 中收集的所有 watcher 执行更新，即调用 watcher.update 方法，这个方法会把当前 watcher 加入到全局的 watcher 队列 queue（其实就是数组）。

然后通过 nextTick 方法把 刷新 watcher 队列的方法，即 flushSchedulerQueue() 添加到全局的 callbacks 数组当中。

如果当前浏览器的异步任务队列中 不存在 flushCallbacks 函数，就通过 timerFunc 方法使用异步去执行 flushCallbacks 方法，这个方法会把 callbacks 清空并执行里面所有 flushSchedulerQueue 函数。

如果当前浏览器的异步任务队列中 存在 flushCallbacks 函数，那么就会等待当前异步队列中的 flushCallbacks 函数执行完成后，在加入下一个 flushCallbacks 函数。

其中负责刷新 watcher 队列的 flushSchedulerQueue() 函数，就会执行 queue 队列中的每个 watcher.run() 方法，从而进入更新阶段，如：执行组件的更新函数 updateComponents 或执行用户 watch 回调。

vue 中的 nextTick 原理是什么？

Vue-nextTick 在官方文档解释中，是用于在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的 DOM。

• 在 nextTick 中，会把接收的回调函数 cb 使用 try catch 进行包裹，目的是方便进行异常捕获，之后会把这个 cb 存入到 全局的 callbacks 数组中
• 执行 timerFunc，通过浏览器的异步循环队列去执行 flushCallbacks 函数清空 callbacks 数组并执行里面的回调函数