vue是不是實(shí)時(shí)刷新dom

今天小編給大家分享一下vue是不是實(shí)時(shí)刷新dom的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

成都服務(wù)器托管，成都創(chuàng)新互聯(lián)公司提供包括服務(wù)器租用、綿陽(yáng)機(jī)房托管、帶寬租用、云主機(jī)、機(jī)柜租用、主機(jī)租用托管、CDN網(wǎng)站加速、主機(jī)域名等業(yè)務(wù)的一體化完整服務(wù)。電話(huà)咨詢(xún)：18982081108

vue不是實(shí)時(shí)刷新dom。Vue中的數(shù)據(jù)更新是異步的，意味著在修改完Data之后并不能立刻獲取修改后的DOM元素。Vue在更新DOM時(shí)是異步執(zhí)行的，只要偵聽(tīng)到數(shù)據(jù)變化，Vue將開(kāi)啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更，如果同一個(gè)watcher被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次，這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和DOM操作是非常重要的。

Vue中的數(shù)據(jù)更新是異步的，意味著我們?cè)谛薷耐闐ata之后并不能立刻獲取修改后的DOM元素。

Vue在更新DOM時(shí)是異步執(zhí)行的，只要偵聽(tīng)到數(shù)據(jù)變化，Vue將開(kāi)啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更，如果同一個(gè)watcher被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次，這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和DOM操作是非常重要的，然后，在下一個(gè)的事件循環(huán)tick中，Vue刷新隊(duì)列并執(zhí)行實(shí)際(已去重的)工作，Vue在內(nèi)部對(duì)異步隊(duì)列嘗試使用原生的Promise.then、MutationObserver和setImmediate，如果執(zhí)行環(huán)境不支持，則會(huì)采用setTimeout(fn, 0)代替。

Vue異步更新DOM的原理

1、 什么時(shí)候能獲取到真正的DOM元素？

在Vue的nextTick回調(diào)中。

2 、為什么Vue需要通過(guò)nextTick方法才能獲取最新的DOM？

vue在調(diào)用Watcher更新視圖時(shí)，并不會(huì)直接進(jìn)行更新，而是把需要更新的Watcher加入到queueWatcher隊(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 只是單純通過(guò)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，接下來(lái)執(zhí)行this.$nextTick 的回調(diào)函數(shù)時(shí)，能獲取到更新后的DOM元素了。

// 我們使用 this.$nextTick 其實(shí)就是調(diào)用 nextTick 方法
Vue.prototype.$nextTick = function (fn: Function) {
 return nextTick(fn, this);
};

以上就是“vue是不是實(shí)時(shí)刷新dom”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標(biāo)題：vue是不是實(shí)時(shí)刷新dom
轉(zhuǎn)載來(lái)源：http://muchs.cn/article12/iheegc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、標(biāo)簽優(yōu)化、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)、企業(yè)建站、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)