$nextTick和$forceUpdate
vm.$nextTick( [callback] )
官方解釋： 將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行
要理解這句話壹瘟，首先要了解一下vue的異步更新隊(duì)列憔鬼，Vue 異步執(zhí)行 DOM 更新。只要觀察到數(shù)據(jù)變化站蝠，不會(huì)立即更新DOM,Vue 將開(kāi)啟一個(gè)隊(duì)列热凹，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變项棠。如果同一個(gè) 數(shù)據(jù)被的多次 改變几苍，只會(huì)被推入到隊(duì)列中一次。例如智厌，當(dāng)你設(shè)置 vm.someData = 'new value' 诲泌，對(duì)應(yīng)的DOM更新會(huì)被推到一個(gè)隊(duì)列里，該組件不會(huì)立即重新渲染铣鹏，會(huì)在當(dāng)前tick完畢后敷扫，在下一個(gè)tick中渲染DOM。在事件循環(huán)中诚卸，每進(jìn)行一次循環(huán)操作稱為tick葵第。而nextTick函數(shù)就是vue提供的一個(gè)實(shí)例方法，數(shù)據(jù)更新后等待下一個(gè)tick里Dom更新完后執(zhí)行回調(diào)惨险，回調(diào)的 this 自動(dòng)綁定到調(diào)用它的實(shí)例上羹幸。
例如：
html:
<span class="test">{{egData}}</span>
<el-button @click="changeData">改變</el-button>
js：
new Vue({
data () {
return {
egData: 'old Message'
}
}
methods: {
changeData () {
this.egData = 'new Message'
console.log($('.test').html(), '-----------------------')
}
}
})
復(fù)制代碼
結(jié)果： 第一次點(diǎn)擊輸出 old Message -----------------------，第二次點(diǎn)擊輸出 new Message -----------------------
使用$nextTick:
js：
new Vue({
data () {
return {
egData: 'old Message'
}
}
methods: {
changeData () {
this.egData = 'new Message'
this.$nextTick(function () {
console.log($('.test').html(), '-----------------------')
})
}
}
})
復(fù)制代碼
結(jié)果：不管第幾次點(diǎn)擊辫愉，都輸出 new Message -----------------------
$nextTick使用場(chǎng)景：
1栅受、數(shù)據(jù)更新后想要馬上操作新的DOM，需要把操作寫(xiě)在nextTick的回調(diào)里
2恭朗、在created鉤子函數(shù)里需要操作DOM屏镊，也可以把操作寫(xiě)在nextTick的回調(diào)里,(created鉤子函數(shù)里還沒(méi)有掛載dom，所以直接操作會(huì)有問(wèn)題)
$forceUpdate()
迫使Vue實(shí)例重新（rander）渲染虛擬DOM痰腮，注意并不是重新加載組件而芥。結(jié)合vue的生命周期，調(diào)用$forceUpdate后只會(huì)觸發(fā)beforeUpdate和updated這兩個(gè)鉤子函數(shù)膀值，不會(huì)觸發(fā)其他的鉤子函數(shù)棍丐。它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件沧踏。
$forceUpdate()使用場(chǎng)景：
1歌逢、當(dāng)在data里沒(méi)有顯示的聲明一個(gè)對(duì)象的屬性，而是之后給該對(duì)象添加屬性翘狱，這種情況vue是檢測(cè)不到數(shù)據(jù)變化的秘案，可以使用$forceUpdate()
html:
<span class="test">{{egData.value}}</span>
<el-button @click="changeData">改變</el-button>
js:
egData: {}
...
changeData () {
this.egData.value = 'oldValue'
this.$forceUpdate() // dom會(huì)更新
}
復(fù)制代碼
但是這種做法并不推薦，官方說(shuō)如果你現(xiàn)在的場(chǎng)景需要用forceUpdate方法 ,那么99%是你的操作有問(wèn)題，如上data里不顯示聲明對(duì)象的屬性阱高，之后添加屬性時(shí)正確的做法時(shí)用 vm.$set() 方法赚导，所以forceUpdate請(qǐng)慎用
轉(zhuǎn)自https://juejin.cn/post/6844903812872798216
