day84-nextTick

nextTick

语法：this.$nextTick(回调函数)

作用：在下一次dom更新结束后执行其指定的回调

todoList案例

在item组件中，设计编辑按钮，自动出现输入框并获取焦点

在todo上增添isedit属性，如果todo是第一次编辑则增添isEdit属性

如果不是第一次编辑，将isEdit属性改为true

在执行完dom操作后调用nexttick获取焦点

handleEdit(todo) {
   // 判断todo身上是否有isedit
   if(todo.hasOwnProperty.call('isEdit')) {
     todo.isEdit = true
   }else {
     this.$set(todo, 'isEdit', true)
   }
   this.$nextTick(() => {
     this.$refs.inputTitle.focus()
   })
 },

 

总结

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