$nextTick vue DOM的异步更新的解决方法

vue监测到数据更新后，开启一个异步的DOM更新队列，不会你可更新DOM，要等待主线程更新完成。

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

我们可以在哪里访问到更新后的DOM呢?

this.$nextTick里的函数体
updated生命周期钩子函数

nextTick使用场景

1、Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。
2、当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它

目标: 点按钮(消失) - 输入框出现并聚焦

1. 获取到输入框
2. 输入框调用事件方法focus()达到聚焦行为

<template>
  <div>
      <input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow">
      <button v-else @click="btn">点击我进行搜索</button>
  </div>
  //v-show在页面加载的时候就有了，没有v-if的延迟效果
</template>

export default {
    data(){
        return {
            isShow: false
        }
    },
    methods: {
        async btn(){
            this.isShow = true;
            // this.$refs.myInp.focus()报错
            // 原因: data变化更新DOM是异步的
            // 输入框还没有挂载到真实DOM上
            // 解决:
            // this.$nextTick(() => {
            //     this.$refs.myInp.focus()
            // })
            // 扩展: await取代回调函数
            // $nextTick()原地返回Promise对象，拿到真实的DOM
            await this.$nextTick()
            this.$refs.myInp.focus()
        }
    }
}