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