nextTick 是什么

TIP

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

<template>
  <div>
    <h1 ref="title">{{ title }}</h1>
    <button @click="changeTitle">修改title</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "Juncaihe.com",
    };
  },
  // 打印顺序 1 2 3 4
  created(){
    console.log(1)
    // 异步的
    this.$nextTick(()=>{
      console.log(3)
    })
  },
  mounted(){
    console.log(2)
    // 异步的
    this.$nextTick(()=>{
      console.log(4)
    })
  },
  methods: {
    changeTitle() {
      this.title = "修改后的title";
      // 打印真实Dom节点内容
      console.log(this.$refs.title.innerHTML); // Juncaihe.com

      // 获取更新后的Dom
      this.$nextTick(() => {
        console.log(this.$refs.title.innerHTML); // 修改后的title
      });
    },
  },
};
</script>

什么时候用

• 主要是处理我们在变更完数据以后，无法立刻拿到最新的DOM节点对象的问题。

TIP

理解为：vue执行完渲染后会执行this.nextTick()里面的callback函数。