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

目的

理解下 nexttick 的作用和几个简单的使用场景

正文

起什么作用？

在下次 dom 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 dom。

我想各位都知道或了解 vue 的渲染流程，vue 在监听到数据变化后会重新渲染，配合 vdom 更新真实的 dom，而 nexttick 的触发时机就是在调用方法后的第一次重新渲染完毕后。

如何使用？

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

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

有什么使用场景？

需要等待渲染完成后执行的一些方法

初始化绑定或操作 dom

比如在 created 和 mounted 回调中，需要操作渲染好的 dom，则需要在 nexttick 中执行相关逻辑，这在必须使用一些老的需要绑定 dom 的库时很有用。

比如，在加载 ueditor 时，可能会这样玩

获取元素宽度

在 vue 中获取元素宽度有两种方式，第一种是通过 $refs[ref名称].style.width，第二种可以使用传统操作 dom 的方式获取，但这两者要获取到准确的元素宽度，则需要在 dom 渲染完毕后执行。

总结

虽说 vue 的设计理念并不建议我们去直接操作 dom，但有些场景下出现了特别令人迷惑的问题，理解 vue 的渲染逻辑后，使用 nexttick() 可以解决。

以上就是如何使用vue中的nexttick的详细内容，更多关于使用vue中的nexttick的资料请关注其它相关文章！