this.$nextTick(() =＞ {})；

概念

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。

案例

• 如果修改完数据之后向立刻操作DOM元素，就需要使用nextTcik。
• 如果想要在created()中操作DOM，也需要使用nextTcik，因为在此阶段，DOM还未被渲染

• 如果修改完数据之后向立刻操作DOM元素，就需要使用nextTcik。

<template>
  <div class="hello">
    <div>
      <button id="firstBtn" @click="handleClick()" ref="btn">{{msg}}</button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg:"原始值",
    }
  },
  methods:{
    handleClick(){
      this.msg="修改后的值";
      console.log(this.$refs.btn.innerText);   //that.$refs.aa获取指定DOM，输出：原始值
    }
  }
}
</script>

使用this.$nextTick

methods:{
  testClick:function(){
    this.msg="修改后的值";
    this.$nextTick(() => {
      console.log(that.$refs.btn.innerText);  //输出：修改后的值
    });
  }
}

• 如果想要在created()中操作DOM，也需要使用nextTcik，因为在此阶段，DOM还未被渲染

created(){
  this.$nextTick(() => {  //不使用this.$nextTick()方法会报错
      that.$refs.btn.innerHTML="created中更改了按钮内容";  //写入到DOM元素
  });
},