nextTick概念

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

例子

eg：有一个函数：

handleEdit(todo) {
    
    
            if (todo.hasOwnProperty('isEdit')) {
    
    
                todo.isEdit = true
            } else {
    
    
                this.$set(todo, 'isEdit', true)
            }
            
            // nextTick指定的结点会在Dom更新之后执行
            this.$nextTick(function (){
    
    
                this.$refs.inputTitle.focus()
            })
        },

代码说明：
todo.isEdit绑定了一个input输入框的是否可见性，即如果todo.isEdit=true，输入框才可见
this.$set(todo, 'isEdit', true)是设置isEdit为true(即input框可见)
this.$refs.inputTitle指的是该输入框。
this.$refs.inputTitle.focus():是是该输入框获取焦点

我们想要实现的效果是：输入框一可见就获取焦点。如果我们直接写this.$refs.inputTitle.focus()不在外面嵌套$nextTick，就会出错，这是因为：Vue是在执行完这个函数之后再判断数据发生了变化，重新渲染模板，也就是说函数执行完之后input框才可见，而添加焦点是在函数中执行，即没有input框就进行获取焦点，这显然是不可以的。所以vue为我们提供了nextTick方法，nextTick方法中的函数会在VUE渲染完页面之后再执行，这样就可以正常获取焦点了。

Vue——nextTick方法

文章目录

nextTick概念

例子

猜你喜欢