$nextTick的基本使用

首先说一说什么是nextTick。

根据官网的解释，nextTick就是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

换句话说，Vue在更新DOM时是异步执行的，即当数据发生变化时，Vue将会开启一个异步更新的队列。当视图的数据变化完事后，再统一进行更新。

也就是说，在DOM更新的时候，后面将获取不到更新后的最新的变量，如下例：

<template>
  <div class="home">
    <div ref="btn">{{ message }}</div>
    <button @click="change()">点我修改</button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      message: "旧变量",
    }
  },
  methods: {
    change() {
      this.message = "新变量"
      console.log(this.$refs.btn.innerText)
      
    }
  }
}
</script>

此时点击按钮触发方法，虽然你改变了div上的message值，但是由于异步的缘故，此时通过ref无法获取div上的值，因为这个时候DOM并未更新。因此输出的是“旧变量”。

因此对change()方法进行修改，使用$nextTick，获取更新后的DOM值：

change() {
   this.message = "新变量"
   this.$nextTick(()=>{
       console.log(this.$refs.btn.innerText)
   }) 
}

结果就能获取到最新的值了。

若没有nextTick，每次改变数据都会触发视图更新，及其浪费资源。因此，有了该机制，只需统一更新一次就可以了。

希望本文会对你有所帮助。