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

【问题标题】：vue.js: How can nextTick ensure that dom render is completed after data change?vue.js：nextTick如何保证数据变化后dom渲染完成？
【发布时间】：2018-12-20 04:09:10
【问题描述】：

在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渲染完成）。

有人能给我解释一下吗？谢谢。

【问题讨论】：

很多时候，我发现当一个人尝试使用nextTick() 时，它通常不是适合这项工作的工具，而 vue 有其他更合适的工具.请提供我们可以用来复制您的问题的代码示例
@Derek 在复杂的网络应用中，nextTick 会被更多地使用。因为它将更频繁地需要元素的几何和位置计算。并且这些计算必须在渲染完全完成后进行。
我不同意，Vue 有挂钩到元素渲染状态，可用于确定元素是否已渲染
如何读取元素的新宽度和高度？你如何应用它们？
@tomwang1013 请看：vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

标签： vue.js vuejs2

【解决方案1】：

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

您可以在 nextTick 的回调中使用 this.$refs.p.innerHTML 之类的东西访问更新后的 DOM。但您可能还没有在屏幕上看到该内容。

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

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

请参阅此答案，例如小提琴：
https://forum.vuejs.org/t/does-nexttick-work-weirdly/42918/7

【讨论】：