$nextTick有什么作用？

一、NextTick是什么

官方對(duì)其的定義

在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM

什么意思呢？

我們可以理解成，Vue 在更新 DOM 時(shí)是異步執(zhí)行的。當(dāng)數(shù)據(jù)發(fā)生變化，Vue將開啟一個(gè)異步更新隊(duì)列，視圖需要等隊(duì)列中所有數(shù)據(jù)變化完成之后，再統(tǒng)一進(jìn)行更新

場(chǎng)景1：

<p ref="continer">{{ msg }}</p>
<button @click="change()">改變</button>

data() {return {msg: '你好'}},methods: {change() {this.msg += '呀'console.log(this.$refs.continer.innerText)// 解決方法//   this.$nextTick(() => {//     console.log(this.$refs.continer.innerText)//   })}},

這時(shí)候想獲取頁(yè)面最新的DOM節(jié)點(diǎn)，卻發(fā)現(xiàn)獲取到的是舊值

console.log(this.$refs.continer.innerText) // 你好

因?yàn)?#xff0c;點(diǎn)擊事件觸發(fā)后，vue會(huì)把對(duì)應(yīng)方法內(nèi)的任務(wù)執(zhí)行完以后，再進(jìn)行頁(yè)面渲染，所以，拿到的是老的值。

場(chǎng)景2：

	<p v-if="!isEdit">姓名:{{ name }}</p><p v-if="isEdit">姓名: <input type="text" ref="ipt" v-model="name" /></p><br /><button @click="change">編輯</button>

data() {return {name: 'test',isEdit: false}},methods: {change() {this.isEdit = true// 此時(shí)，我想直接獲取焦點(diǎn),行不通//因?yàn)镈om還沒(méi)更新的時(shí)候就已經(jīng)執(zhí)行了這行代碼,所以獲取不到焦點(diǎn)// this.$refs.ipt.focus()this.$nextTick(() => {this.$refs.ipt.focus()})}},

二、為什么要有nextTick？

舉個(gè)例子

{{num}}
for(let i=0; i<100000; i++){num = i
}

如果沒(méi)有 nextTick 更新機(jī)制，那么 num 每次更新值都會(huì)觸發(fā)視圖更新(上面這段代碼也就是會(huì)更新10萬(wàn)次視圖)，有了nextTick機(jī)制，只需要更新一次，所以nextTick本質(zhì)是一種優(yōu)化策略