this.$nextTick用法

官网解释：

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

它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

---

个人理解：

用于直接操作dom元素的时候使用，由于直接操作dom元素时页面拿到的状态是修改之前的数据，这时需要使用到this.$nextTick，相当于setTimeout。

---

代码展示：

<template>
    <button ref="box" @click="boxClick">{{ a}}</button>
</template>
export default {
    data(){
        return {
            a: '111'
        }
    }
}

methods: {
           boxClick(){
              this.a = '222';
              // 由于dom元素还没有更新， 因此打印出来的还是未改变之前的值；
              console.log(that.$refs.box.innerText);//输出的是111
           }
}

methods: {
           boxClick(){
              this.a= '222';
              this.$nextTick(() => {
                  // dom元素更新后执行， 因此此处能正确打印出更改之后的值；
                  console.log(that.$refs.box.innerText); //输出的是222
              })
           }
        }

---

总结：

用于直接操作dom元素的时候使用。