时间戳

首页 > 解决方案 > vue.js：nextTick如何保证数据变化后dom渲染完成？

vue.js - vue.js：nextTick如何保证数据变化后dom渲染完成？

问题描述

在https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue中，文档告诉我们，如果您想在渲染完成后做某事（例如获取元素的新宽度和高度） , 你应该在Vue.nextTick(callback). 但是有几次我发现它不起作用（我不知道其他人是否有时也发现它不起作用）并且必须求助于setTimeout修复它。

我怀疑如何nextTick确保渲染完全完成。我阅读了源代码，发现它可以使用Promise.then，setImmediate或者setTimeout(cb, 0)运行你的代码nextTick。我认为 dom 渲染可以在事件循环之间的任何时间发生。所以使用的所有内部方法nextTick都不能保证新的渲染工作完成。

[注意]我不是要讨论调用是否是nextTick解决某些问题的好方法，这是另一个问题。我的观点是为什么它可以做它提供的东西（dom 渲染完成）。

有人可以给我一个解释吗？谢谢。

标签： vue.jsvuejs2

解决方案

nextTick不保证 DOM 渲染完成，它只是保证更新 DOM 结构。

您可以使用类似this.$refs.p.innerHTMLnextTick 回调中的内容访问更新的 DOM。但是您可能还没有在屏幕上看到该内容。

nextTick将您的回调放入微任务队列中，在所有微任务完成后，浏览器将有机会呈现新内容。

如果要等待内容显示在屏幕上，可以使用setImmediate（仅限 IE）或setTimeout(fn, 0)优先级低于渲染任务的任务，以便在显示新内容后执行。

例如小提琴见这个答案：
https ://forum.vuejs.org/t/does-nexttick-work-weirdly/42918/7

推荐阅读