49nextTick_ 本次重新解析dom后_ 再操作结果

nextTick_ 本次重新解析dom后_ 再操作结果

常用

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

2.作用: 在下一次DOM更新结束后执行其指定的回调, (本次更新完成后的dom，再此基础操作)

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

<template>
    <li>
        <label>
            <input type="checkbox" :checked="todo.done" @change="updateDone(todo.tid)"/>
            <span v-show="!todo.isEdit">{{todo.title}}</span>
            <input 
            type="text" 
            v-show="todo.isEdit" 
            :value="todo.title" 
            @blur="handlerbulr(todo, $event)" 
            ref="updateInput"
            />    
        </label>
        <button class="btn btn-danger" @click="removeTodo(todo.tid)">删除</button>
        <button class="btn btn-edit" @click="editTodo(todo)">编辑</button>
    </li>
</template>

<script>
    export default {
        name:'MyItem',
        props:['todo','checkTodo','deleteTodo'],
        methods:{
            updateDone(tid){
                this.checkTodo(tid);
            },
            removeTodo(tid){
                if(confirm('你确定要删除么？')) this.deleteTodo(tid);
            },
            editTodo(todo){
                
                // 判断todo.isEdit:bool,如果是true，说明正在编辑，span应该影藏，而input应该显示，反之反之。
                // 注意：这里使用的是$set()，而不是直接写，原因是： 直接写vue不会检测到数据的变化。（数据检测）
                // 判断一个对象中是否拥有一个属性通过：hasOwnProperty
                
                if (!todo.hasOwnProperty('isEdit')){
                    this.$set(todo, 'isEdit', true)
                }else{
                    todo.isEdit = true
                }
                
                // 补充：直接获取焦点
                // 方法一： 定时器获取：由于解析顺序是，执行完当前方法体内所有的代码，再解析，所以直接写是不能实现的。
                /* (不推荐使用)
                setTimeout(() => {
                    this.$refs.updateInput.focus();  
                }, );
                */ 
               // 方法二：使用vue中的api：nextTick(), 当前这次，不执行此区域，当解析完此次之后，再执行此区域。
                
                this.$nextTick(()=>{
                    this.$refs.updateInput.focus(); 
                })
            },
            handlerbulr(todo,e){
                //blur: 失去焦点时触发的事件
                // 获取event 事件: $event
                
                todo.isEdit = false;
                this.$bus.$emit('updateTodo', todo.tid, e.target.value)
                
            },
        }
    }
</script>