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ù)組長(zhǎng)度應(yīng)該輸出6個(gè)，但是實(shí)際上數(shù)組長(zhǎng)度只有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)注好吧啦網(wǎng)其它相關(guān)文章！