什么是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)用汹忠，簡(jiǎn)單的理解是：當(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 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)继谚，在修改數(shù)據(jù)之后使用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操作無(wú)異于徒勞济瓢，所以此處一定要將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)容"; //寫(xiě)入到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并沒(méi)有立即更新，后續(xù)的dom都不是最新的
if(domTxt==="原始值"){
console.log("文本data被修改后dom內(nèi)容沒(méi)立即更新");
}else {
console.log("文本data被修改后dom內(nèi)容被馬上更新了");
}
},
}
}
</script>
正確的用法是：vue改變dom元素結(jié)構(gòu)后使用vue.$nextTick()方法來(lái)實(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ù)修改后并沒(méi)有DOM沒(méi)有立即更新柬帕，
if(domTxt==="原始值"){
console.log("文本data被修改后dom內(nèi)容沒(mé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ì)開(kāi)啟一個(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)開(kāi)始時(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)用谤民。
