$nextTick作用过程、使用场景及使用方法详解

使用场景

在大部分事件的处理函数中，会对原本的数据进行修改，存在修改后的数据导致新DOM元素产生的情况
应用场景：我们需要对此次新出现的DOM元素进行处理
存在的问题：对新出现DOM元素的处理语句需要写在当前的事件处理函数中，但是由于DOM更新异步的问题，导致无法获取到新的DOM元素，以至于无法给它设置处理语句

作用过程

此处举例说明：

<template>
  <div>
      <input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow">
      <button v-else @click="btn">点击我进行搜索</button>
  </div>
</template>
<script>
export default {
    data(){
        return {
            isShow: false
        }
    },
    methods: {
        async btn(){
            this.isShow = true;
            await this.$nextTick()
            this.$refs.myInp.focus()
        }
    }
}
</script>

最大的特殊点在于能在真实DOM更新前，对还未实际生成的DOM元素设置了处理语句，而能实现的原因就是$nextTick可以获取到更新后的数据，尽管这份数据还并未在DOM中更新出来，但拿到数据后却是有机会去给新DOM设置处理语句。设置之后nextTick这个微任务挂载在DOM异步更新的宏任务中，当DOM异步更新完成后，挨个执行其内挂载的微任务，就能正确触发之前设置好的处理语句

使用方法

用法1：
btn(){
this.isShow = true;
this.$nextTick(() => {
                 this.$refs.myInp.focus()//处理语句
            })
}

用法2：
async btn(){
            this.isShow = true;
            await this.$nextTick()
            this.$refs.myInp.focus() //处理语句
        }