vue——$nextTick输入框聚焦案例

目标：点击按钮自身隐藏，出现输入框并马上处于激活状态

错误写法：this.$refs.myInp.focus()     

         原因: data变化更新DOM是异步的，输入框还没有挂载到真实DOM上

正确写法：this.$nextTick(() => {
                       this.$refs.myInp.focus()
                    })

优化：await this.$nextTick()

           this.$refs.myInp.focus()

await取代回调函数， $nextTick()原地返回Promise对象（此时要加async）

<template>
  <div>
      <input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow">
      <button v-else @click="btn">点击我进行搜索</button>
  </div>
</template>

<script>
// 目标: 点按钮(消失) - 输入框出现并聚焦
// 1. 获取到输入框
// 2. 输入框调用事件方法focus()达到聚焦行为
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对象
            await this.$nextTick()
            this.$refs.myInp.focus()
        }
    }
}
</script>

<style>

</style>