在 Vue.js 中，我们通常会用到 $nextTick 方法来处理 DOM 更新后的操作。这个方法可以让我们在 Vue.js 的异步更新队列被执行之后再进行一些逻辑处理，从而避免在 DOM 更新完成之前进行不必要的操作，也避免了由于数据改变引起的 DOM 更新延迟问题。本文将为大家详细讲解 $nextTick 的使用。
什么是 $nextTick 方法
在 Vue.js 中，当数据改变的时候，Vue.js 会异步地执行一系列更新操作，并且会将这些更新操作统一放到一个更新队列中。这个更新队列在下一次事件循环时会被执行，也就是说前一个更新队列的操作完成之后，DOM 已经被更新了。Vue 提供了 $nextTick 方法，用来在异步更新队列被执行之后再进行一些逻辑处理。
$nextTick() 方法返回一个 Promise 对象，可以通过 .then() 来实现函数的回调。当异步更新队列被执行且更新完成后，Promise 对象就会被解决，并且会执行 then 的回调函数。另外，你也可以不使用 Promise 直接传入一个回调函数作为 $nextTick() 的参数。
$nextTick 的使用
通过 Promise 形式使用 $nextTick
-- -------------------- ---- -------
------ ------- -
------ -
-------- --
----- --
--
-------- -
-- -------
------------- -
------------------- -------------------
------------------------ -- -
-------------------------
-------------------------
--
--
-- -------
-------------------- -
----- ------------- - -----------------------------------------
----------------------- - --------------------------
-
-
-在上面的代码中，我们先通过 handleClick 方法修改了 list 中的数据，然后使用 $nextTick() 方法等待异步更新队列被执行并完成之后，在 Promise 对象被解决的时候执行 scrollListToBottom() 方法，将列表滚动到底部。
通过回调函数形式使用 $nextTick
-- -------------------- ---- -------
------ ------- -
------ -
-------- --
----- --
--
-------- -
-- -------
------------- -
------------------- -------------------
----------------- -- -
-------------------------
-------------------------
--
--
-- -------
-------------------- -
----- ------------- - -----------------------------------------
----------------------- - --------------------------
-
-
-在上面的代码中，我们使用 $nextTick() 方法等待异步更新队列被执行并完成之后，在回调函数内部执行 scrollListToBottom() 方法，将列表滚动到底部。
注意事项
$nextTick()方法是异步的，所以你当你在回调函数内部修改数据时，这个变化不会影响到下一个更新队列，要想将修改的数据应用到下一个更新队列中，可以在$nextTick().then()回调函数内部进行修改，或者使用$watch方法监听数据的变化并更新界面。- 在使用
$nextTick()方法时，应该注意一些 DOM 的操作，比如修改列表的 scrollTop 或者修改 input 的值，在这种情况下，你应先等待 DOM 更新完成之后再执行相应的操作。 $nextTick()方法返回的是一个 Promise 对象，所以如果你在代码中没有使用 Promise 的相关知识，可能会出现一些困难。- 有一些 DOM 的更新可能不会被异步更新队列记录，比如通过
addEventListener给 DOM 添加一个事件处理函数，或者调用 window 的resize或者scroll方法等，这些操作可能不会被异步更新队列记录，所以在这种情况下，你需要手动使用$nextTick()方法。
结语
本文为你详细讲解了 $nextTick() 方法的使用，在 Vue.js 中使用 $nextTick() 方法可以让我们在异步更新队列被执行之后再进行一些逻辑处理，也避免了由于数据改变引起的 DOM 更新延迟问题。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67821738935627c900f6806c
