vue中的$nextTick

什么是Vue.nextTick()？

官方定义：

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

理解：

Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新

异步更新队列

示例

在组件内使用 vm.$nextTick() 实例方法特别方便，因为它不需要全局 Vue，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上。

示例1：

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '未更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '已更新'
      console.log(this.$el.textContent) // => '未更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '已更新'
      })
    }
  }
})

示例2：当我点击按钮的时候要让input框显示并且获取焦点

<template>
  <div class="home">
    <p>Hello</p>
    <p><input type="text" v-show="isShow" ref="ipt" /></p>
    <button @click="handleBtn">显示</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    handleBtn() {
      this.isShow = true;
      this.$refs.ipt.focus();
      // this.$nextTick(() => {
      //   this.$refs.ipt.focus();
      // });
    },
  },
};
</script>

结果显示出来但并没有获取焦点：

这个其实是vue在事件执行完成后然后一次性更新DOM，这样的话获取焦点自然不能和input显示逻辑一起执行。

如果放在this.$nextTick()里：

 methods: {
    handleBtn() {
      this.isShow = true;
      this.$nextTick(() => {
        this.$refs.ipt.focus();
      });
    },
  },

可以看到input显示出来并且获取焦点。