Vue中的nextTick作用和几个简单的使用场景 Vue中的nextTick作用和几个简单的

目的
理解下 nextTick 的作用和几个简单的使用场景
正文
起什么作用？

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
我想各位都知道或了解 Vue 的渲染流程，Vue 在监听到数据变化后会重新渲染，配合 VDOM 更新真实的 DOM，而 nextTick 的触发时机就是在调用方法后的第一次重新渲染完毕后。

文章图片

如何使用？

有两种使用方法，一种是传入回调，另一种是 Promise，官方使用示例如下：

// 修改数据vm.msg = 'Hello'// DOM 还没有更新Vue.nextTick(function () { // DOM 更新了})// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)Vue.nextTick() .then(function () { // DOM 更新了 })

如果在 SPA（单文件组件）中，可能是这个样子

有什么使用场景？

需要等待渲染完成后执行的一些方法
初始化绑定或操作 DOM

比如在 created 和 mounted 回调中，需要操作渲染好的 DOM，则需要在 nextTick 中执行相关逻辑，这在必须使用一些老的需要绑定 DOM 的库时很有用。
比如，在加载 UEditor 时，可能会这样玩

总结
虽说 Vue 的设计理念并不建议我们去直接操作 DOM，但有些场景下出现了特别令人迷惑的问题，理解 Vue 的渲染逻辑后，使用 nextTick() 可以解决。
【Vue中的nextTick作用和几个简单的使用场景】以上就是如何使用Vue中的nextTick的详细内容，更多关于使用vue中的nextTick的资料请关注脚本之家其它相关文章！