什么是Vue.nextTick()镐牺？炫掐？
定義：
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法睬涧，獲取更新后的 DOM募胃。
所以就衍生出了這個(gè)獲取更新后的DOM的Vue方法。所以放在Vue.nextTick()回調(diào)函數(shù)中的執(zhí)行的應(yīng)該是會(huì)對(duì)DOM進(jìn)行操作的 js代碼畦浓；
理解：
nextTick()痹束，是將回調(diào)函數(shù)延遲在下一次dom更新數(shù)據(jù)后調(diào)用，簡單的理解是：當(dāng)數(shù)據(jù)更新了讶请，在dom中渲染后祷嘶，自動(dòng)執(zhí)行該函數(shù)，
<template>
<div class="hello">
<div>
<button id="firstBtn" @click="testClick()" ref="aa">{{testMsg}}</button>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
testMsg:"原始值",
}
},
methods:{
testClick:function(){
let that=this;
that.testMsg="修改后的值";
console.log(that.$refs.aa.innerText); //that.$refs.aa獲取指定DOM夺溢，輸出：原始值
}
}
}
</script>
使用this.$nextTick()
methods:{
testClick:function(){
let that=this;
that.testMsg="修改后的值";
that.$nextTick(function(){
console.log(that.$refs.aa.innerText); //輸出：修改后的值
});
}
}
注意：Vue 實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化论巍，而是按一定的策略進(jìn)行 DOM 的更新。nextTick嘉汰，則可以在回調(diào)中獲取更新后的 DOM，
什么時(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操作無異于徒勞，所以此處一定要將DOM操作的js代碼放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中朵诫。與之對(duì)應(yīng)的就是mounted鉤子函數(shù)辛友，因?yàn)樵撱^子函數(shù)執(zhí)行時(shí)所有的DOM掛載已完成。
created(){
let that=this;
that.$nextTick(function(){ //不使用this.$nextTick()方法會(huì)報(bào)錯(cuò)
that.$refs.aa.innerHTML="created中更改了按鈕內(nèi)容"; //寫入到DOM元素
});
},
2剪返、當(dāng)項(xiàng)目中你想在改變DOM元素的數(shù)據(jù)后基于新的dom做點(diǎn)什么废累，對(duì)新DOM一系列的js操作都需要放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中；通俗的理解是：更改數(shù)據(jù)后當(dāng)你想立即使用js操作新的視圖的時(shí)候需要使用它
<template>
<div class="hello">
<h3 id="h">{{testMsg}}</h3>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
testMsg:"原始值",
}
},
methods:{
changeTxt:function(){
let that=this;
that.testMsg="修改后的文本值"; //vue數(shù)據(jù)改變脱盲，改變dom結(jié)構(gòu)
let domTxt=document.getElementById('h').innerText; //后續(xù)js對(duì)dom的操作
console.log(domTxt); //輸出可以看到vue數(shù)據(jù)修改后DOM并沒有立即更新邑滨，后續(xù)的dom都不是最新的
if(domTxt==="原始值"){
console.log("文本data被修改后dom內(nèi)容沒立即更新");
}else {
console.log("文本data被修改后dom內(nèi)容被馬上更新了");
}
},
}
}
</script>
正確的用法是：vue改變dom元素結(jié)構(gòu)后使用vue.$nextTick()方法來實(shí)現(xiàn)dom數(shù)據(jù)更新后延遲執(zhí)行后續(xù)代碼
changeTxt:function(){
let that=this;
that.testMsg="修改后的文本值"; //修改dom結(jié)構(gòu)
that.$nextTick(function(){ //使用vue.$nextTick()方法可以dom數(shù)據(jù)更新后延遲執(zhí)行
let domTxt=document.getElementById('h').innerText;
console.log(domTxt); //輸出可以看到vue數(shù)據(jù)修改后并沒有DOM沒有立即更新，
if(domTxt==="原始值"){
console.log("文本data被修改后dom內(nèi)容沒立即更新");
}else {
console.log("文本data被修改后dom內(nèi)容被馬上更新了");
}
});
},
3钱反、在使用某個(gè)第三方插件時(shí) 掖看，希望在vue生成的某些dom動(dòng)態(tài)發(fā)生變化時(shí)重新應(yīng)用該插件匣距，也會(huì)用到該方法，這時(shí)候就需要在 $nextTick 的回調(diào)函數(shù)中執(zhí)行重新應(yīng)用插件的方法哎壳。
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)問題题山。兰粉。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback) 顶瞳。這樣回調(diào)函數(shù)在 DOM 更新完成后就會(huì)調(diào)用玖姑。
原文鏈接：https://blog.csdn.net/zhouzuoluo/article/details/84752280
