Vue中异步更新的原理是什么
今天就跟大家聊聊有关Vue 中异步更新的原理是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
创新互联公司2013年开创至今,是专业互联网技术服务公司,拥有项目网站建设、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元曲江做网站,已为上家服务,为曲江各地企业和个人服务,联系电话:18980820575
Vue 异步更新 DOM 原理
很多同学都知道,Vue 中的数据更新是异步的,意味着我们在修改完 Data 之后,并不能立刻获取修改后的 DOM 元素。
例如:
{{ message }}
什么时候我们才能获取到真正的 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 < queue.length; index++) { watcher = queue[index]; // 更新 DOM watcher.run(); } }
根据上面的代码,我们可以得出这样一个流程图:
图中可以看到,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 < copies.length; i++) { callbacks[i](); } }
可以看到,timerFunc 是根据浏览器兼容性创建的一个异步方法,它执行完成之后,会调用 flushSchedulerQueue 方法进行具体的 DOM 更新。
分析到这里,我们就可以得到一张整体的流程图了。
接下来,我们来完善一些判断逻辑。
判断 has 标识,避免在一个 Queue 中添加相同的 Watcher。
判断 waiting 标识,让所有的 Watcher 都在一个 tick 内进行更新。
判断 flushing 标识,处理 Watcher 渲染时,可能产生的新 Watcher。
如:触发了 v-if 的条件,新增的 Watcher 渲染。
结合以上判断,最终的流程图如下:
最后,我们分析一下,为什么 this.$nextTick 能够获取更新后的 DOM?
// 我们使用 this.$nextTick 其实就是调用 nextTick 方法 Vue.prototype.$nextTick = function (fn: Function) { return nextTick(fn, this); };
可以看到,调用 this.$nextTick 其实就是调用了图中的 nextTick 方法,在异步队列中执行回调函数。根据先来后到原则,修改 Data 触发的更新异步队列会先得到执行,执行完成后就生成了新的 DOM ,接下来执行 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 中异步更新的原理是什么有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
当前题目:Vue中异步更新的原理是什么
分享路径:http://scyanting.com/article/pohdci.html