Vue.nextTick是Vue官方給我們提供的一個(gè)API（方法），作用是在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)罩扇。在修改數(shù)據(jù)之后立即使用這個(gè)方法婆芦，獲取更新后的DOM；
那么我們的理解是：當(dāng)數(shù)據(jù)發(fā)生變化之后喂饥，DOM視圖并不會(huì)立即更新消约，如果我們?cè)诎l(fā)生變化之后立馬去獲取某個(gè)節(jié)點(diǎn)或者某個(gè)節(jié)點(diǎn)的值，很有可能結(jié)果就是undefined员帮；因?yàn)閂ue實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后DOM立即變化或粮，而是按一定的策略進(jìn)行DOM的更新；
來看一個(gè)小demo：
App.vue
<template>
<div id="app">
<div ref="message">{{msg}}</div>
<div v-if="msg1">{{msg1}}</div>
<button @click="changeMsg">Change the Message</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
msg:"Hello Vue",
msg1: '',
}
},
methods:{
changeMsg(){
this.msg='hello world';
this.msg1=this.$refs.message.innerHTML;
console.log("更新DOM之前:"+this.msg1)
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
我們通過運(yùn)行代碼能夠看到當(dāng)我們不在this.$nextTick方法里面進(jìn)行DOM操作的時(shí)候捞高，this.$refs.message.innerHTML的值存儲(chǔ)的還是之前的初始值氯材；
修改代碼：
App.vue
<template>
<div id="app">
<div ref="message">{{msg}}</div>
<div v-if="msg1">{{msg1}}</div>
<button @click="changeMsg">Change the Message</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
msg:"Hello Vue",
msg1: '',
}
},
methods:{
changeMsg(){
this.msg='hello world';
// this.msg1=this.$refs.message.innerHTML;
// console.log("更新DOM之前:"+this.msg1)
this.$nextTick(()=>{
this.msg1=this.$refs.message.innerHTML;
console.log("更新DOM之后:"+this.msg1)
})
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
修改代碼之后我們可以發(fā)現(xiàn)，使用this.$nextTick很容易的就接收到了更新后的值硝岗，正如官網(wǎng)解釋：在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)氢哮。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的DOM辈讶；
再來修改代碼對(duì)比一下：
App.vue
<template>
<div id="app">
<div ref="message">{{msg}}</div>
<div v-if="msg1">{{msg1}}</div>
<button @click="changeMsg">Change the Message</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
msg:"Hello Vue",
msg1: '',
}
},
methods:{
changeMsg(){
this.msg='hello world';
this.msg1=this.$refs.message.innerHTML;
console.log("更新DOM之前:"+this.msg1)
this.$nextTick(()=>{
this.msg1=this.$refs.message.innerHTML;
console.log("更新DOM之后:"+this.msg1)
})
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
經(jīng)過修改代碼命浴，我們現(xiàn)在可以很容易看出來this.$nextTick(callback)的作用，callback是回調(diào)函數(shù)也就是我們要進(jìn)行操作DOM的事情贱除；
應(yīng)用場(chǎng)景：
在vue的生命周期鉤子函數(shù)created()中進(jìn)行DOM操作的時(shí)候一定要把DOM操作放入到this.$nextTick()中生闲；
因?yàn)樵赾reated鉤子函數(shù)觸發(fā)的時(shí)候，DOM是沒有進(jìn)行渲染的月幌；DOM沒有進(jìn)行渲染碍讯，然后進(jìn)行DOM操作無疑是徒勞的；
所以我們?cè)赾reated中進(jìn)行DOM操作的時(shí)候扯躺，一定要將DOM操作放入到this.$nextTick()中捉兴；
與之相反的是mounted，因?yàn)楫?dāng)觸發(fā)mounted的時(shí)候录语，DOM的掛載和渲染都已經(jīng)完成了倍啥，所以在mounted中進(jìn)行DOM操作是不會(huì)有任何問題的；
因?yàn)镈OM更新是異步的澎埠，像v-if指令判斷增刪DOM元素虽缕，我們?cè)诜椒ㄖ薪o變量賦值的時(shí)候，如果不使用this.$nextTick()蒲稳，我們很有可能拿到的還是初始值氮趋，如果想拿到更新后的值伍派，需要使用this.$nextTick（）方法
