vue異步更新dom的實(shí)現(xiàn)淺析
Data對(duì)象:vue中的data方法中返回的對(duì)象;
Dep對(duì)象:每一個(gè)Data屬性都會(huì)創(chuàng)建一個(gè)Dep,用來搜集所有使用到這個(gè)Data的Watcher對(duì)象;
Watcher對(duì)象:主要用于渲染DOM
Vue異步更新DOM的原理
Vue中的數(shù)據(jù)更新是異步的,意味著我們?cè)谛薷耐闐ata之后并不能立刻獲取修改后的DOM元素。
1 什么時(shí)候能獲取到真正的DOM元素?
在Vue的nextTick回調(diào)中。
2 為什么Vue需要通過nextTick方法才能獲取最新的DOM?
2.1 vue在調(diào)用Watcher更新視圖時(shí),并不會(huì)直接進(jìn)行更新,而是把需要更新的Watcher加入到Queue隊(duì)列里,然后把具體的更新方法flushSchedulerQueue 傳給nexTick 進(jìn)行調(diào)用。
// src > core > observer > watcher.js + scheduler.js// 當(dāng)一個(gè) Data 更新時(shí),會(huì)依次執(zhí)行以下代碼 // 1. 觸發(fā) Data.set // 2. 調(diào)用 dep.notify // 3. Dep 會(huì)遍歷所有相關(guān)的 Watcher 執(zhí)行 update 方法 class Watcher { // 4. 執(zhí)行更新操作 update() { queueWatcher(this); } } const queue = []; function queueWatcher(watcher: Watcher) { // 5. 將當(dāng)前 Watcher 添加到異步隊(duì)列 queue.push(watcher); // 6. 執(zhí)行異步隊(duì)列,并傳入回調(diào) nextTick(flushSchedulerQueue); } // 更新視圖的具體方法 function flushSchedulerQueue() { let watcher, id; // 排序,先渲染父節(jié)點(diǎn),再渲染子節(jié)點(diǎn) // 這樣可以避免不必要的子節(jié)點(diǎn)渲染,如:父節(jié)點(diǎn)中 v-if 為 false 的子節(jié)點(diǎn),就不用渲染了 queue.sort((a, b) => a.id - b.id); // 遍歷所有 Watcher 進(jìn)行批量更新。 for (index = 0; index < queue.length; index++) { watcher = queue[index]; // 更新 DOM watcher.run(); } }
2.2 nextTick -- 將傳入的flushSchedulerQueue 添加到callbacks 數(shù)組中,然后執(zhí)行了timerFunc 方法。
const callbacks = []; let timerFunc; function nextTick(cb?: Function, ctx?: Object) { let _resolve; // 1.將傳入的 flushSchedulerQueue 方法添加到回調(diào)數(shù)組 callbacks.push(() => { cb.call(ctx); }); // 2.執(zhí)行異步任務(wù) // 此方法會(huì)根據(jù)瀏覽器兼容性,選用不同的異步策略 timerFunc(); }
2.3 timerFunc方法 -- 是根據(jù)瀏覽器兼容性創(chuàng)建的一個(gè)異步方法,執(zhí)行完該方法就會(huì)調(diào)用flushSchedulerQueue 方法進(jìn)行具體的DOM更新。
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") { // 這是一個(gè)宏任務(wù),但相比 setTimeout 要更好 timerFunc = () => { setImmediate(flushCallbacks); }; } else { // 如果以上方法都不知道,使用 setTimeout 0 timerFunc = () => { setTimeout(flushCallbacks, 0); }; } // 異步執(zhí)行完后,執(zhí)行所有的回調(diào)方法,也就是執(zhí)行 flushSchedulerQueue function flushCallbacks() { for (let i = 0; i < copies.length; i++) { callbacks[i](); } }
2.4 完善邏輯判斷
2.4.1 判斷has 標(biāo)識(shí),避免在一個(gè)Queue 中添加相同的Watcher;
2.4.2 判斷waiting 標(biāo)識(shí),讓所有的Watcher 都在一個(gè)tick 內(nèi)進(jìn)行更新;
2.4.3 判斷flushing 標(biāo)識(shí),處理Watcher 渲染時(shí),可能產(chǎn)生的新Watcher。
如觸發(fā)了v-if 條件,新增的Watcher 渲染。
tip:nextTick 只是單純通過Promise、setTimeout等方法模擬的異步任務(wù)。
3 為什么this.$nextTick 能夠獲取更新后的DOM?
調(diào)用this.$nextTick 其實(shí)就是調(diào)用圖中的nextTick 方法,在異步隊(duì)列中執(zhí)行回調(diào)函數(shù)。根據(jù)先進(jìn)先出原則,修改Data 觸發(fā)的更新異步隊(duì)列會(huì)先得到執(zhí)行,執(zhí)行完成后就生成了新的DOM,接下來執(zhí)行this.$nextTick 的回調(diào)函數(shù)時(shí),能獲取到更新后的DOM元素了。
// 我們使用 this.$nextTick 其實(shí)就是調(diào)用 nextTick 方法 Vue.prototype.$nextTick = function (fn: Function) { return nextTick(fn, this); };
總結(jié):vue異步更新的原理
修改 Vue 中的 Data 時(shí),就會(huì)觸發(fā)所有和這個(gè) Data 相關(guān)的 Watcher 進(jìn)行更新。首先,會(huì)將所有的 Watcher 加入隊(duì)列 Queue。然后,調(diào)用 nextTick 方法,執(zhí)行異步任務(wù)。在異步任務(wù)的回調(diào)中,對(duì) Queue 中的 Watcher 進(jìn)行排序,然后執(zhí)行對(duì)應(yīng)的 DOM 更新。
到此這篇關(guān)于vue異步更新dom的實(shí)現(xiàn)淺析的文章就介紹到這了,更多相關(guān)vue異步更新dom內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue移動(dòng)端微信授權(quán)登錄插件封裝的實(shí)例
今天小編就為大家分享一篇vue移動(dòng)端微信授權(quán)登錄插件封裝的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08vue3 Element-Plus el-backtop無效問題及解決
這篇文章主要介紹了vue3 Element-Plus el-backtop無效問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue項(xiàng)目中CSS?Modules和Scoped?CSS的介紹與區(qū)別
在vue中我們有兩種方式可以定義css作用域,一種是scoped,另一種就是css modules,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中CSS?Modules和Scoped?CSS的相關(guān)資料,需要的朋友可以參考下2022-03-03vue.js 底部導(dǎo)航欄 一級(jí)路由顯示 子路由不顯示的解決方法
下面小編就為大家分享一篇vue.js 底部導(dǎo)航欄 一級(jí)路由顯示 子路由不顯示的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue+Java后端進(jìn)行調(diào)試時(shí)解決跨域問題的方式
今天在開發(fā)中遇到有點(diǎn)小問題,vue+Java后端進(jìn)行調(diào)試時(shí)如何解決跨域問題,下面小編給大家分享解決方法,感興趣的朋友一起看看吧2017-10-10解決vue中axios設(shè)置超時(shí)(超過5分鐘)沒反應(yīng)的問題
這篇文章主要介紹了解決vue中axios設(shè)置超時(shí)(超過5分鐘)沒反應(yīng)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09Vuex中actions優(yōu)雅處理接口請(qǐng)求的方法
在項(xiàng)目開發(fā)中,如果使用到了 vuex,通常我會(huì)將所有的接口請(qǐng)求單獨(dú)用一個(gè)文件管理,這篇文章主要介紹了Vuex中actions如何優(yōu)雅處理接口請(qǐng)求,業(yè)務(wù)邏輯寫在 actions 中,本文給大家分享完整流程需要的朋友可以參考下2022-11-11Vue3使用echarts tree高度自適應(yīng)支持滾動(dòng)查看功能
這篇文章主要介紹了Vue3使用echarts tree高度自適應(yīng)支持滾動(dòng)查看功能,文章同通過代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-06-06