在 Vue.js 中，当我们修改一个数据后，页面并不会立即响应该变化。这是因为 Vue 进行异步更新 DOM，如果想要在 DOM 更新后执行一些操作，那么就需要使用 $nextTick 函数。
什么是 $nextTick
$nextTick 函数是 Vue 实例的一个方法，用于在 DOM 更新完成后执行回调函数。$nextTick 的执行时机会在 本次 DOM 更新周期内的所有同步和异步任务执行完毕后 才会执行。
$nextTick 的使用场景
- 当某个数据更新时，需要对更新后的 DOM 进行操作；
- 当渲染的列表更新后，需要获取列表容器的实际高度；
- 当需要对更新后的 HTML 元素进行操作时。
$nextTick 的使用方式
在 Vue 实例中，使用 this.$nextTick 方法即可。this.$nextTick 接受一个回调函数作为参数，在 DOM 更新完成后会执行该回调函数。下面是一个简单的示例代码：
-- -------------------- ---- -------
----------
-----
---------- ----- ------
------- -----------------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ -
-
--
-------- -
---------- -
------------
----------------- -- -
---------------- ------
--------------------------------------------------
--
-
-
-
---------在这个示例代码中，我们使用了 this.$nextTick 来获取更新后的 DOM。当我们点击按钮增加计数值时，this.$nextTick 中的回调函数就会在修改之后的 DOM 更新完成后执行。在这个回调函数中，我们可以获取到更新后的 DOM，这里我们获取了 p 元素中的文本内容。
$nextTick 的异步操作
$nextTick 的异步操作会在同步任务执行完之后执行。如果我们在 $nextTick 应用回调函数中再去修改数据，那么这些数据的更新就不会立即被执行，而是会在下一个更新周期中生效。下面是一个简单的示例代码：
-- -------------------- ---- -------
----------
-----
---------- ----- ------
------- -----------------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ -
-
--
-------- -
---------- -
------------
----------------- -- -
---------------- ------
------------
-----------------------
--
-
-
-
---------在这个示例代码中，我们在 $nextTick 中的回调函数中再次修改了数据。效果是，这里修改的数据并不会立即生效，而是等到下一个更新周期中才会生效。
总结
$nextTick 在 Vue.js 中非常常用，可以在 DOM 更新完成后执行一些操作，非常方便。但是需要注意的是，在 $nextTick 的回调函数中修改数据可能会导致数据不及时更新的问题。因此，需要在使用 $nextTick 时慎重考虑数据的更新逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645dfa0b968c7c53b00544a2