上一篇《详解Vue的响应式原理》中，我们通过9张流程图，理解了Vue的渲染流程，相信大家对整个Vue的渲染流程有一定的了解，这一篇我们来重点关注一下Vue异步更新原理模块。
本文主要分析Vue从Data更新，到异步更新视图的流程，也就是下面图中橙色部分。
我们先来回顾一下图中的几个对象：
- Data对象：Vue中的Data方法返回的对象。
- Dep对象：每一个Data属性都会创建一个Dep，用来搜集所有使用到这个Data的Watcher对象。
- Watcher对象：主要用于渲染。
接下来，我们就开始分析这个流程。
Vue异步更新DOM原理
很多同学都知道，Vue中的数据更新时异步的，意味着我们在修改完Data之后，并不能立刻获取修改后的DOM元素。
例如：
{{ message }}
export default {
data() {
return {
message: "hello",
};
},
methods: {
changeData() {
this.message = "hello world";
const textContent = document.getElementById("text").textContent;
// 直接获取，不是最新的
console.log(textContent === "hello world"); // false
// $nextTick 回调中，是最新的
this.$nextTick(() => {
const textContent = document.getElementById("text").textContent;
console.warn(textContent === "hello world"); // true
});
},
},
};
什么时候我们才能获取真正的DOM元素？
答： 在Vue的nextTick中
这一点在Vue官网有详细的介绍，但你是否有想过，为什么Vue需要通过nextTick方法才能获取最新的DOM？
带着这个疑问，我们直接看一下源码。
// 当一个 Data 更新时，会依次执行以下代码
// 1. 触发 Data.set
// 2. 调用 dep.notify
// 3. Dep 会遍历所有相关的 Watcher 执行 update 方法
class Watcher {
// 4. 执行更新操作
update() {
queueWatcher(this);
}
}
const queue = [];
function queueWatcher(watcher: Watcher) {
// 5. 将当前 Watcher 添加到异步队列
queue.push(watcher);
// 6. 执行异步队列，并传入回调
nextTick(flushSchedulerQueue);
}
// 更新视图的具体方法
function flushSchedulerQueue() {
let watcher, id;
// 排序，先渲染父节点，再渲染子节点
// 这样可以避免不必要的子节点渲染，如：父节点中 v-if 为 false 的子节点，就不用渲染了
queue.sort((a, b) => a.id - b.id);
// 遍历所有 Watcher 进行批量更新。
for (index = 0; index 根据上面的代码，我们可以得出这样一个流程图：
图中可以看到，Vue在调用Watcher更新视图时，并不会直接进行更新，而是把需要更新的Watcher加入到Queue队列里，然后把具体的更新方法flushSchedulerQueue传给nextTick进行调用。
接下来，我们分析一下nextTick。
const callbacks = [];
let timerFunc;
function nextTick(cb?: Function, ctx?: Object) {
let _resolve;
// 1.将传入的 flushSchedulerQueue 方法添加到回调数组
callbacks.push(() => {
cb.call(ctx);
});
// 2.执行异步任务
// 此方法会根据浏览器兼容性，选用不同的异步策略
timerFunc();
}
可以看到，nextTick函数非常简单，它只是将传入的flushSchedulerQueue添加到callbacks数组中，然后执行timerFunc方法。
接下来，我们分析一下timerFunc方法。
let timerFunc;
// 判断是否兼容 Promise
if (typeof Promise !== "undefined") {
timerFunc = () => {
Promise.resolve().then(flushCallbacks);
};
// 判断是否兼容 MutationObserver
// https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
} else if (typeof MutationObserver !== "undefined") {
let counter = 1;
const observer = new MutationObserver(flushCallbacks);
const textNode = document.createTextNode(String(counter));
observer.observe(textNode, {
characterData: true,
});
timerFunc = () => {
counter = (counter + 1) % 2;
textNode.data = String(counter);
};
// 判断是否兼容 setImmediate
// 该方法存在一些 IE 浏览器中
} else if (typeof setImmediate !== "undefined") {
// 这是一个宏任务，但相比 setTimeout 要更好
timerFunc = () => {
setImmediate(flushCallbacks);
};
} else {
// 如果以上方法都不知道，使用 setTimeout 0
timerFunc = () => {
setTimeout(flushCallbacks, 0);
};
}
// 异步执行完后，执行所有的回调方法，也就是执行 flushSchedulerQueue
function flushCallbacks() {
for (let i = 0; i 可以看到，timerFunc是根据浏览器兼容性创建的一个异步方法，它执行完成之后，会调用flushSchedulerQueue方法进行具体的DOM更新。
分析到这，我们就可以得到一张整体的流程图了：
接下来，我们来完善一些判断逻辑。
- 判断has标识，避免在一个Queue中添加相同的Watcher。
- 判断waiting标识，让所有的Watcher都在一个tick内进行更新。
-
判断flushing标识，处理Watcher渲染时，可能产生新的Watcher。
如： 触发了v- if的条件，新增的Watcher渲染。
结合以上判断，最终的流程图如下：
Vue异步更新原理4.png最后，我们分析一下，为什么this.$nextTick能够获取更新后的DOM？
// 我们使用 this.$nextTick 其实就是调用 nextTick 方法
Vue.prototype.$nextTick = function (fn: Function) {
return nextTick(fn, this);
};
可以看到，调用this.nextTick的回调函数时，能获取到更新后的DOM元素了。
由于nextTick只是单纯通过Promise、SetTimeout等方法模拟的异步任务，所以也可以手动执行一个异步任务，来实现和this.$nextTick相同的效果。
this.message = "hello world";
// 手动执行一个异步任务，也能获取最新的 DOM
Promise.resolve().then(() => {
const textContent = document.getElementById("text").textContent;
console.log(textContent === "hello world"); // true
});
setTimeout(() => {
const textContent = document.getElementById("text").textContent;
console.log(textContent === "hello world"); // true
});
思考与总结
本文从源码角度，介绍了Vue异步更新原理，来简单回顾一下吧。
1. 修改Vue中的Data时，就会触发所有和这个Data相关的Watcher进行更新。
2. 首先，会将所有的Watcher加入队列Queue。
3. 然后，调用nextTick方法，执行异步任务。
4. 在异步任务的回调中，对Queue中的Watcher进行排序，然后执行对应的DOM更新。
最后，如果你对此有任何想法，欢迎留言评论！
转自 https://blog.csdn.net/u011192674/article/details/108048082
点击咨询 