一捕透、Vue.nextTick( [callback, context] )
以下是官網(wǎng)內(nèi)容
參數(shù)：
{Function} [callback]
{Object} [context]
用法：
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法撇寞，獲取更新后的 DOM宪躯。
2.1.0 起新增：如果沒有提供回調(diào)且在支持 Promise 的環(huán)境中蔫缸，則返回一個(gè) Promise释树。請(qǐng)注意 Vue 不自帶 Promise 的 polyfill游沿，所以如果你的目標(biāo)瀏覽器不原生支持 Promise (IE：你們都看我干嘛)削祈，你得自己提供 polyfill翅溺。
二、以下加強(qiáng)理解
放在Vue.nextTick()回調(diào)函數(shù)中的執(zhí)行的是會(huì)對(duì)DOM進(jìn)行操作的 js代碼髓抑；nextTick()咙崎，是將回調(diào)函數(shù)延遲在下一次dom更新數(shù)據(jù)后調(diào)用，
當(dāng)數(shù)據(jù)更新了吨拍，在dom中渲染后褪猛，自動(dòng)執(zhí)行該函數(shù)。
可以一起來(lái)寫一個(gè)案例：
雖然第一個(gè)按鈕的內(nèi)容已經(jīng)按照想法由‘msg’改變?yōu)椤薷暮蟮膍sg’羹饰，但是在控制臺(tái)獲得的數(shù)據(jù)依舊是‘MSG’伊滋。這時(shí)我們的nextTick，就要上場(chǎng)了队秩，不知道它能不能勝任這份工作笑旺，將數(shù)據(jù)和界面進(jìn)行一個(gè)統(tǒng)一。
Vue實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化刹碾，而是按一定的策略進(jìn)行 DOM 的更新燥撞。所以才會(huì)出現(xiàn)按鈕一的問(wèn)題。
$nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)迷帜，在修改數(shù)據(jù)之后使用 $nextTick物舒，則可以在回調(diào)中獲取更新后的 DOM。
Vue.nextTick(callback) 使用原理：
Vue是異步執(zhí)行dom更新的戏锹，一旦觀察到數(shù)據(jù)變化冠胯，Vue就會(huì)開啟一個(gè)隊(duì)列，然后把在同一個(gè)事件循環(huán) (event loop) 當(dāng)中觀察到數(shù)據(jù)變化的 watcher 推送進(jìn)這個(gè)隊(duì)列锦针。如果這個(gè)watcher被觸發(fā)多次荠察，只會(huì)被推送到隊(duì)列一次。這種緩沖行為可以有效的去掉重復(fù)數(shù)據(jù)造成的不必要的計(jì)算和DOm操作奈搜。而在下一個(gè)事件循環(huán)時(shí)悉盆，Vue會(huì)清空隊(duì)列，并進(jìn)行必要的DOM更新馋吗。
當(dāng)你設(shè)置 vm.someData = 'new value'焕盟，DOM 并不會(huì)馬上更新，而是在異步隊(duì)列被清除宏粤，也就是下一個(gè)事件循環(huán)開始時(shí)執(zhí)行更新時(shí)才會(huì)進(jìn)行必要的DOM更新脚翘。如果此時(shí)你想要根據(jù)更新的 DOM 狀態(tài)去做某些事情灼卢，就會(huì)出現(xiàn)問(wèn)題。来农。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM 鞋真，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback) 。這樣回調(diào)函數(shù)在 DOM 更新完成后就會(huì)調(diào)用沃于。
什么時(shí)候需要用的Vue.nextTick()
1.Vue生命周期的created()鉤子函數(shù)進(jìn)行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中涩咖，原因是在created()鉤子函數(shù)執(zhí)行的時(shí)候DOM 其實(shí)并未進(jìn)行任何渲染，而此時(shí)進(jìn)行DOM操作無(wú)異于徒勞揽涮，所以此處一定要將DOM操作的js代碼放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中抠藕。
?當(dāng)你再次點(diǎn)擊firstBtn時(shí)，它的innerTest將不會(huì)再被改變蒋困。
2.與之對(duì)應(yīng)的就是mounted鉤子函數(shù)盾似，因?yàn)樵撱^子函數(shù)執(zhí)行時(shí)所有的DOM掛載已完成。
3.當(dāng)項(xiàng)目中你想在改變DOM元素的數(shù)據(jù)后基于新的dom做點(diǎn)什么雪标，對(duì)新DOM一系列的js操作都需要放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中零院；
就是說(shuō)更改數(shù)據(jù)后當(dāng)你想立即使用js操作新的視圖的時(shí)候需要使用它
使用正確的方法進(jìn)行改造
4.在使用某個(gè)第三方插件時(shí) 告抄。
在vue生成的某些dom動(dòng)態(tài)發(fā)生變化時(shí)重新應(yīng)用該插件，也會(huì)用到該方法嵌牺，這時(shí)候就需要在 $nextTick 的回調(diào)函數(shù)中執(zhí)行重新應(yīng)用插件的方法打洼。
