谈谈Vue中的nextTick

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

当数据发生变化之后，DOM视图并不会立即更新，如果我们在发生变化之后立马去获取某个节点或者某个节点的值，很有可能结果就是undefined；因为Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新；

来看一个小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>

我们通过运行代码能够看到当我们不在this.$nextTick方法里面进行DOM操作的时候，this.$refs.message.innerHTML的值存储的还是之前的初始值；

修改代码：

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>

修改代码之后我们可以发现，使用this.$nextTick很容易的就接收到了更新后的值，正如官网解释：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM；

再来修改代码对比一下：

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>

经过修改代码，我们现在可以很容易看出来this.$nextTick(callback)的作用，callback是回调函数也就是我们要进行操作DOM的事情；

应用场景：