Vue CLI 系列之（十四）$nextTick

$nextTick

$nextTick这也是一个生命周期

​ 如果要实现一个input框点击后进行一些数据修改的操作【这里是指能够引起Vue重新解析模板的数据修改操作，比如修改data中的数据】，然后让该input框获取焦点，该怎么做？

// Item组件中有一个input输入框和一个编辑按钮，实现点击按钮后input框显示并让input框获取焦点
<input 
       type="text" 
       :value="thingtitle" 
       v-show="isEdit" 
       @keyup.enter="editTodo($event,todo.id)"
       ref="testx"
/>

<button v-show="!isEdit" class="btn btn-danger" @click="edit()">编辑</button>

// 事件回调如下
edit(){
  // this.isEdit用于控制input框的显示和隐藏
  // 当事件的回调函数中进行了数据修改的操作，Vue并不是只要数据发生了改变，就立刻解析模板，
  // Vue会在整个回调函数执行完毕后进行模板的重新解析，
  // 避免因回调中多次修改数据，对应进行多次模板解析而引起的效率低的问题
  this.isEdit = !this.isEdit

  // 执行到这儿时模板还没有重新解析，页面上现在input输入框是隐藏的（display:none），
  // 对于隐藏的input框调用input输入框的focus()方法获取焦点是无效的
  // this.$refs.testx.focus()

  // 正确的做法如下
  this.$nextTick(function(){
  	this.$refs.testx.focus()
  })

  // 开启定时器也是可以实现的，不过定时器是利用了队列的特性。【涉及浏览器的循环模型】
  // 而且官方并不推荐这么做
  setTimeout(()=>{
  	this.$refs.testx.focus()
  })
}

总结如下：

1. 语法：this.$nextTick(回调函数)
2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。