Vue2：实用的$nextTick方法

一、场景描述

我们点击修改后，需要input框获取焦点。但是，此时Vue还没有重新解析dom模板，所以，input还没有出现，导致获取焦点失败。

二、$nextTick的作用

Vue解析机制

Vue解析模板的时机是，在methods里面的函数执行完毕后，才进行模板解析。

nextTick工作说明

$nextTick()是Vue.js框架中的一个方法，它主要用于 DOM 操作。当我们修改 Vue 组件中的数据时，Vue.js 会在下次事件循环前自动更新视图，并异步执行 $nextTick() 中的回调函数。这个过程可以确保 DOM 已经被更新，以及可以操作到最新的 DOM。

具体来说，当修改了 Vue 组件中的数据时，Vue.js 并不会立即进行视图更新。Vue.js 会将修改的数据记录下来，并在下一次事件循环时才更新视图。而 $nextTick() 方法则是用于等待这个事件循环结束后再执行回调函数。这样可以确保我们操作 DOM 的时候，DOM 已经被 Vue 更新过了。

具体用法

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

代码：

                this.$nextTick(function(){
                    this.$refs.inputTitle.focus()
                })

等价代码：

                setTimeout(()=>{
                     this.$refs.inputTitle.focus();
                 });

以上两个代码效果相同。

三、总结

需要注意的是，虽然 $nextTick() 方法可以解决异步更新导致的问题，但如果过度使用该方法会导致性能问题。因此，在实际开发中，只有在必要的情况下才应该使用 $nextTick() 方法。