Vue異步更新DOM及$nextTick執(zhí)行機制解讀

更新時間：2023年03月24日 09:59:07 作者：shangdong2023

這篇文章主要介紹了Vue異步更新DOM及$nextTick執(zhí)行機制解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue異步更新DOM策略

我們知道，Vue實現(xiàn)響應式并不是數(shù)據(jù)發(fā)生變化之后DOM立即變化，而是按一定的策略進行DOM的更新。

Vue 在更新 DOM 時是異步執(zhí)行的。只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個 watcher 被多次觸發(fā)，只會被推入到隊列中一次。這種在緩沖時去除重復數(shù)據(jù)對于避免不必要的計算和 DOM 操作是非常重要的。然后，在下一個的事件循環(huán) “tick" 中，Vue 刷新隊列并執(zhí)行實際（已去重的）工作。

$nextTick執(zhí)行機制

$nextTick會在DOM更新之后被觸發(fā)，以獲取最新DOM節(jié)點。

具體來講：我們使用 JavaScript 進行原生DOM操作時，隨著 JavaScript 代碼執(zhí)行會同步進行DOM更新；而使用 Vue 則會異步更新 DOM，會在當前執(zhí)行棧的最后更新DOM。

對于兼容的瀏覽器來說，nextTick相當于是微任務，即$nextTick的回調(diào)函數(shù)是在當前執(zhí)行棧的所有同步任務執(zhí)行完畢后再執(zhí)行，所以nextTick中會得到 DOM 更新后的結果。（不過頁面渲染始終是在微任務執(zhí)行之后才進行的，所以$nextTick回調(diào)函數(shù)執(zhí)行時頁面還沒有進行渲染，回調(diào)函數(shù)執(zhí)行時在頁面上看不到更新后的結果）

注：瀏覽器如果不兼容則有幾種備選方案，其中setTimeout是最后的一種備選方案，它會將回調(diào)函數(shù)加入任務隊列 task 中，等待執(zhí)行。

示例詳解

JavaScript原生DOM操作（隨著JS代碼的執(zhí)行同步進行DOM更新）：

<body>
? ? <ul id="ul1">
? ? ? ? <li>100</li>
? ? ? ? <li>200</li>
? ? ? ? <li>300</li>
? ? </ul>

? ? <script>
? ? ? ? const ul1 = document.getElementById('ul1')
? ? ? ? console.log(ul1.children.length); // 3
? ? ? ? const newLi = document.createElement('li')
? ? ? ? newLi.innerHTML = '400'
? ? ? ? ul1.appendChild(newLi)
? ? ? ? console.log(ul1.children.length); // 4
? ? ? ? Promise.resolve().then(() => {
? ? ? ? ? ? alert(ul1.children.length) // 彈出4，此時頁面還沒有進行渲染（頁面還未展示內(nèi)容）
? ? ? ? })
? ? </script>
</body>

Vue異步更新DOM：

<template>
? <div id="app">
? ? <ul ref="ul1">
? ? ? <li v-for="(item, index) in list" :key="index">
? ? ? ? {{ item }}
? ? ? </li>
? ? </ul>
? ? <button @click="addItem">添加一項</button>
? </div>
</template>

<script>
export default {
? name: "app",
? data() {
? ? return {
? ? ? list: ["a", "b", "c"],
? ? };
? },
? methods: {
? ? addItem() {
? ? ? this.list.push(`${Date.now()}`);
? ? ? this.list.push(`${Date.now()}`);
? ? ? this.list.push(`${Date.now()}`);

? ? ? // 獲取 DOM 元素
? ? ? const ulElem = this.$refs.ul1;
? ? ? // eslint-disable-next-line
? ? ? console.log(ulElem.childNodes.length);// 3

? ? ? // 1. 異步進行 dom 更新，$nextTick 待 DOM 更新完再回調(diào)
? ? ? // 2. dom 更新時會將 data 的修改做整合，多次 data 修改只會更新一次
? ? ? this.$nextTick(() => {
? ? ? ? // eslint-disable-next-line
? ? ? ? console.log(ulElem.childNodes.length); // 6

? ? ? ? alert(ulElem.childNodes.length); // 彈出 6，此時頁面還沒有進行渲染（頁面還沒展示新添加的3個元素）
? ? ? });
? ? },
? },
};
</script>

Vue異步更新DOM的目的

因為如果同步進行DOM更新，則每次對響應式數(shù)據(jù)進行修改就都會觸發(fā)setter -> 通知watcher -> 觸發(fā)re-render -> 生成new vnode(vdom) -> patch（更新真實DOM）。

如果每次修改數(shù)據(jù)都會走一遍這個流程是非常消耗性能的，所以使用異步更新 DOM 的策略，先對數(shù)據(jù)修改進行整合，再使用最終的整合結果一次性對 DOM 進行更新。

$nextTick應用示例

<template>
? <div>
? ? <button @click="callbackFun">點我展示輸入框并自動獲取焦點</button> <br />
? ? <input type="text" v-show="test" ref="input" />
? </div>
</template>

<script>
export default {
? name: "App",
? data() {
? ? return {
? ? ? test: false,
? ? };
? },
? methods: {
? ? callbackFun() {
? ? ? this.test = true;
? ? ? this.$nextTick(function () {
? ? ? ? this.$refs.input.focus(); // 若該行代碼不放在 $nextTick 中，則無法展示輸入框后自動獲取焦點
? ? ? });
? ? },
? },
};
</script>