Vue $nextTick详解

这是一个生命周期的钩子

this.$nextTick(回调函数) 在下一次DOM更新结束后执行其指定的回调。

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

使用 $nextTick优化 Todo-List

src/components/MyItem.vue

<template>
  <li>
    <label>
      <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
      <span v-show="!todo.isEdit">{
    
    {
    
     todo.title }}</span>
      <input type="text" v-show="todo.isEdit" :value="todo.title"
        @blur="handleBlur(todo, $event)" ref="inputTitle"/>
    </label>
    <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
    <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">
      编辑
    </button>
  </li>
</template>

<script>
export default {
    
    
  name: "MyItem",
  
  props: ["todo"],	// 声明接收todo
  methods: {
    
    
    handleCheck(id) {
    
    		// 勾选or取消勾选
      // 通知App组件将对应的todo对象的done值取反
      // this.checkTodo(id)
      this.$bus.$emit("checkTodo", id);
    },
    handleDelete(id) {
    
    	// 删除
      if (confirm("确定删除吗？")) {
    
    
        // 通知App组件将对应的todo对象删除
        // this.deleteTodo(id)
        this.$bus.$emit('deleteTodo',id)
      }
    },
    handleEdit(todo) {
    
    	// 编辑
      if (todo.hasOwnProperty("isEdit")) {
    
    
        todo.isEdit = true;
      } else {
    
    
        this.$set(todo, "isEdit", true);
      }
      this.$nextTick(function () {
    
    
        this.$refs.inputTitle.focus();
      });
    },
    handleBlur(todo, e) {
    
    	// 失去焦点回调（真正执行修改逻辑）
      todo.isEdit = false;
      if (!e.target.value.trim()) return alert("输入不能为空！");
      this.$bus.$emit("updateTodo", todo.id, e.target.value);
    },
  },
};
</script>