$nextTick延迟执行：在下次 DOM 更新循环结束之后执行延迟回调

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

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，

例子:
点击按钮,自动显示输入框,隐藏按钮.
输入框获取焦点.
输入框失去焦点,自动显示按钮.

app.vue父组件

<template>
  <div id="app">
    <input ref="inp" type="text" v-if="display" @blur="blur" />
    <button @click="fun" v-else>显示输入框</button>
  </div>
</template>c

<script>

  export default {
    name: 'app',
    data() {
      return {
        display: false
      }
    },
    methods: {
      fun() {
        this.display = !this.display
        this.$nextTick(() => this.$refs.inp.focus())
      },
      blur() {
        this.display = !this.display
      }
    }
  }
</script>

————————————————
版权声明：本文为CSDN博主「广积粮缓称王」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zhouzuoluo/article/details/84752280