快捷導(dǎo)航

深入學(xué)習(xí)Vue nextTick的用法及原理

更新時(shí)間：2019年10月08日 08:23:14 作者：有夢(mèng)想的咸魚前端

這篇文章主要介紹了深入學(xué)習(xí)Vue nextTick的用法及原理,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

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的更新；

來(lái)看一個(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>

我們通過(guò)運(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；

再來(lái)修改代碼對(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>