• 原理

Vue中DOM的异步更新，Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

• 用法

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用this.$nextTick()，然后等待 DOM 更新。

<template>
  <div>
    <p ref="msgRef">{{msg}}</p>
    <button @click="handle">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '原始'
    }
  },
created () {
    console.log("created：" + this.$refs.msgRef.innerHTML); // 这个里会报错，此时没有innerHTML，后面会不执行
    this.$nextTick(() => {
        console.log("created nextTick：" + this.$refs.msgRef.innerHTML);
    })
  },
methods: {
    handle() {
      this.msg = '新值';
      console.log(this.$refs.msgRef.innerHTML);
      this.$nextTick(() => {
        console.log(this.$refs.msgRef.innerHTML);
      })
    }
  }
</script>

结果

从打印的结果可以看出，因为在created()钩子函数的时候dom还没有渲染，所以会报错，created()里后面的就不会执行。

• 1. 把console.log("created：" + this.$refs.msgRef.innerHTML);注释

     
     

从打印结果可以看到在created()中使用this.$nextTick()可以获取到值。

• 2. 点击按钮

     
     

可以看到直接打印的是之前的值，使用this.$nextTick()打印的是更新后的值。

• 使用场景
  • 在created()中进行操作的话一定要使用this.$nextTick(),
  • 在根据数据变化进行DOM操作时使用this.$nextTick()

总结

• 在created()中使用this.$nextTick(),相当于在mounted()中进行操作，因为在created()时DOM还没有渲染
• 在项目中会经常遇到数据更新但是视图没有更新，这种情况就需要用到this.$set()，可以查看我的另一篇文章传送门
• 还有会根据数据变化对DOM进行操作获取某些数据，此时就发生获取不到更新后的值的情况，此时就可以使用this.$nextTick()

以上就是对this.$nextTick()简单的使用和理解。