基于要执行更新后某种操作的几种方法（定时器，$nextTick,updated）

1.e.g:

当用户利用v-show对页面某标签的展示进行控制，在设置某值为true时获取页面焦点，并不会直接起作用，因为vue不会为了在函数中的某个值重新解析模板，执行到this.edit后，此时会紧接着执行focus方法，却没有重新渲染模板，导致无法获取焦点。

<input ref="edit" v-show="edit" type="text" />
<button @click="showedit" >展示输入框</button>
 
showedit(){
    this.edit=true
    this.$refs.edit.focus()
  }

 2.可以尝试用setTimeout,延迟执行，在主任务完成后再去执行focus方法

1.因为 JavaScript 是一个单线程序的解释器，因此一定时间内只能执行一段代码。
2.为了控制要执行的代码，就有一个 JavaScript 任务队列。
3.这些任务会按照将它们添加到队列的顺序执行。
4.setTimeout() 的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行
————————————————
版权声明：本文为CSDN博主「CamilleZJ」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/CamilleZJ/article/details/117485613

showedit() {
      this.edit = true;
      // this.$refs.edit.focus();
      setTimeout(() => {
        this.$refs.edit.focus();
      }, 0);
    },

3.this.$nextTick会在dom节点更新之后再执行，有点类似于定时器

什么时候用：当改变数据后，要基于更新后的新dom进行某些操作时，要在nextTick所指定的回调函数中执行

showedit() {
      this.edit = true;
      // this.$refs.edit.focus();
      // setTimeout(() => {
      //   this.$refs.edit.focus();
      // }, 0);
      this.$nextTick(function(){
        this.$refs.edit.focus();
      })
    },

4.在updated里也可以实现

showedit() {
      this.edit = true;
      // this.$refs.edit.focus();
      // setTimeout(() => {
      //   this.$refs.edit.focus();
      // }, 0);
      // this.$nextTick(function(){
      //   this.$refs.edit.focus();
      // })
    },
  },
  updated(){
    this.$refs.edit.focus();
  }