this.$nextTick() 意义和使用场景

<el-input ref="label" v-show="showLabel" v-model="ruleForm.label" @blur="btnBlur()" maxlength="5" show-word-limit ></el-input>
<i class="el-icon-plus" v-if="openlabel" @click="btnOpen"></i>

export default {
  data() {
    return {
        showLabel:false
  },
　　methods:{
　　　　当我点击某个按钮的时候，我显示一个input输入框出来，并自动获取焦点，但是input显示出来之后并没有自动获取到焦点,
　　　　原因是因为当我代码执行完this.$refs.label.focus()是dom还没来得及更新或者还在更新中，此时就自动获取焦点失败
　　　　知道了原因之后我们就可以使用this.$nextTick(()=>{})来处理，this.$nextTick()会等待dom更新循环之后执行，所以代码修改为
　　　　btnOpen(){
　　　　　　this.showLabel = true
　　　　　　this.$nextTick(()=>{
　　　　　　　　this.$refs.label.focus()
　　　　　　})

　　　　}

　　　　//错误写法
　　　　btnOpen(){
　　　　　　this.showLabel = true
　　　　　　this.$refs.label.focus() 

　　　　}
   }
}