淺析vue中的nextTick
背景
vue是異步渲染的，當(dāng)data改變之后，DOM不會立刻被渲染，頁面渲染時會將data的修改做整合，多次data修改只會做整合最后一次性渲染出來，這也是異步渲染的原因。只有異步渲染才可以實現(xiàn)整合操作。
例子
methods: {
update() {
for (let i = 0; i < 10; i++) {
this.testNum = this.testNum + i;
}
},
},
在你的 Vue 視圖中， testNum 會發(fā)生變化。不過需要注意的是這個變化的過程，雖然我們把 firstNum 循環(huán)修改了 10 次，但是實際上它只會把最后一次的值更新到視圖上——這也是非常合理的，比如說我們這個 demo 里，每一次循環(huán)給 testNum 的賦值只不過是一個過程，最終的目的是拿到 10 次循環(huán)的計算結(jié)果而已。如果我們硬去算 10 次，那么不必要的性能開銷必然是令人肉疼的。
需求
我們需要對data修改后并拿到DOM，對DOM進行操作解決，
例子
<template>
<div id="app">
<ul ref="ul1">
<li v-for="(v, i) in list" :key="i">{{ v }}</li>
</ul>
<button @click="add">add DOM</button>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
list: ["a", "b", "c"],
};
},
methods: {
add() {
this.list.push(`${Date.now()}`);
this.list.push(`${Date.now()}`);
this.list.push(`${Date.now()}`);
const ulElem = this.$refs.ul1;
console.log(ulElem.childNodes.length);
},
},
};
</script>
本來點擊完之后數(shù)組長度應(yīng)該輸出6個，但是實際上數(shù)組長度只有3個，因為data改變后，DOM并不會立刻改變，此時我們是拿不到新增的節(jié)點的，這時候的DOM節(jié)點還是一開始的a,b,c 。DOM操作執(zhí)行完之后，它再異步渲染。
不過我們的期望是點擊完之后立刻拿到后面的三個，這時候就需要請出我們的主角nextTick。
add() {
this.list.push(`${Date.now()}`);
this.list.push(`${Date.now()}`);
this.list.push(`${Date.now()}`);
const ulElem = this.$refs.ul1;
this.$nextTick(() => {
console.log(ulElem.childNodes.length);
});
},
這個例子也可以看出，$nextTick會待DOM渲染完成再回調(diào)，同時也可以看出，我們雖然一次點擊有三次修改data,但是多次修改會進行整合，最后渲染一次，這也說明渲染也是異步的，如果是同步，就沒辦法整合。
以上就是淺析vue中的nextTick的詳細內(nèi)容，更多關(guān)于vue中的nextTick的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue2和vue3的區(qū)別,較為詳細的分析了vue2與vue3的常見區(qū)別與使用方法,需要的朋友可以參考下2023-06-06
Vue3路由組件內(nèi)的路由守衛(wèi)onBeforeRouteLeave和onBeforeRouteUpdate使用
這篇文章主要介紹了Vue3路由組件內(nèi)的路由守衛(wèi)onBeforeRouteLeave和onBeforeRouteUpdate使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
本文給大家介紹了vue項目中跨域問題的完美解決方案，通過更改header，使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建），具體內(nèi)容詳情大家跟隨腳本之家小編一起學(xué)習(xí)吧2018-06-06
vue3.0 CLI - 2.4 - 新組件 Forms.vue 中學(xué)習(xí)表單
這篇文章主要介紹了vue3.0 CLI - 2.4 - 新組件 Forms.vue 中學(xué)習(xí)表單的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
Vite 是一個面向現(xiàn)代瀏覽器的更輕,更快的web應(yīng)用開發(fā)工具,下面這篇文章主要給大家介紹了關(guān)于如何使用vite搭建vue3項目的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
Vue.js響應(yīng)式數(shù)據(jù)的簡單實現(xiàn)方法(一看就會)
Vue最巧妙的特性之一是其響應(yīng)式系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue.js響應(yīng)式數(shù)據(jù)的簡單實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)淘寶購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04
我們在項目開發(fā)的過程中，經(jīng)常會遇到這種情況：為data中的某一個對象添加一個屬性，我們該如何解決這個問題呢，下面小編給大家?guī)砹薞ue中this.$set的正確使用，感興趣的朋友跟隨小編一起看看吧2022-12-12
這篇文章主要介紹了Vue組件渲染與更新實現(xiàn)過程，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03
這篇文章主要介紹了vue--select組件的使用與禁用的實現(xiàn)代碼，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下2018-04-04