$nextTick使用场景

$nextTick官方解读：
       将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

下面我们来看个例子：

需求：点击编辑，显示出输入框更改姓名。

    <div class="box">
      <span>姓名：</span>
      <span v-show="!isShow">{{ name }}</span>
      <input class="ipt" v-show="isShow" v-model="name" type="text" />
      <button class="btn" @click="handleEdit()">编辑</button>
    </div>

    handleEdit() {
      this.isShow = true;
    },

很显然，这一步没任何难度，但是为了用户体验，我们想在显示输入框的时候，顺便让输入框获取焦点，这样用户就可以直接输入，而不需要点一下输入框才能输入。

      <input
        ref="iptRef"
        class="ipt"
        v-show="isShow"
        v-model="name"
        type="text"
      />

    handleEdit() {
      this.isShow = true;
      this.$refs.iptRef.focus();
    },

或许你会想到像上面这样写，很遗憾并不会有效果。因为我们将isShow改为true的时之后，vue并不会立即更新我们的视图，而是会等到这个方法结束之后才会更新。为什么会这样呢？你想想如果你一个方法里要修改十个data里的值，那是不是要更新十次视图啊，是不是要做十次diff呢？所以当我们执行iptRef.focus时，输入框的display还为none

可以怎么做？

    handleEdit() {
      this.isShow = true;
      setTimeout(() => {
         this.$refs.iptRef.focus();
      });
    },

我们将其放在定时器里，让同步任务执行完后在来执行这个宏任务。

应该怎么做？

    handleEdit() {
      this.isShow = true;
      this.$nextTick(function () {
        this.$refs.iptRef.focus();
      });
    },

没错，使用$nextTick才是最优解