Vue 使用this.$nextTick和Vue.nextTick()

1.用法

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

2.举例

 <input v-show="todo.isedit" type="text" :value="todo.title" @blur="handleBlur(todo,$event)" ref="inputFocus"/>
 <button v-show="!todo.isedit" @click="handleEdit(todo)">编辑</button>

// 编辑 走编辑方法时还没有解析input框呢
    handleEdit (todo) {
      // 给todo添加一个isedit属性,handleBlur操作时已经有了isedit属性
      if (todo.hasOwnProperty('isedit')) {
        todo.isedit = true
      } else {
        this.$set(todo, 'isedit', true)
      }
      // 走编辑方法时还没有解析input框呢  只有走了 handleBlur 方法 input才会反应，所以此时this.$refs.inputTitle undefined，所以加定时器延迟点时间
      // setTimeout(()==>{
      //   // 获取焦点
      //   this.$refs.inputTitle.focus()
      // },200)
      // 或者 $nextTick意思是 所有dom都解析完之后在下一次触发 this.$refs.inputTitle.focus()
      this.$nextTick(function () {
        console.log('this指的是：',this)
        console.log('获取焦点了:',this.$refs.inputFocus.focus)
        this.$refs.inputFocus.focus()
      })
    },

部分代码：逻辑是点击编辑时input文本框可以获取焦点（光标在游戏两字后面）。因为触发handleEdit方法时，input文本框还没有解析这个时候还没有文本框，所以 this.$refs.inputFocus 这个时候是undefined,这个时候handleEdit执行到this.$nextTick 时，它会等到所有dom都更新完之后包括input，这个时候在获取焦点就不会为undefined了，其实相当于一个定时器等待dom全部更新完。也可以用setTimeout实现，请看如上代码。

WeChat_20221104104711