gpt4 book ai didi

vue.js:nextTick如何保证数据变化后dom渲染完成?

转载 作者:搜寻专家 更新时间:2023-10-30 22:26:38 25 4
gpt4 key购买 nike

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

我怀疑 nextTick 如何确保渲染完全完成。我阅读了源代码,发现它可能使用 Promise.thensetImmediatesetTimeout(cb, 0) 来运行您的代码下一个滴答声。我认为 dom 渲染可以在事件循环的滴答声之间的任何时间发生。所以nextTick使用的所有内部方法都不能保证新的渲染工作完成。

[注意] 我不是要讨论调用nextTick 来解决是否是个好方法有些问题,这是另一个问题。我的观点是为什么它可以做它提供的事情(dom 渲染完成)。

有人可以给我解释一下吗?谢谢。

最佳答案

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

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

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

如果要等待内容显示在屏幕上,可以使用优先级较低的setImmediate(仅限IE)或setTimeout(fn, 0)而不是渲染任务,因此它将在显示新内容后执行。

请参阅此答案,例如 fiddle :
https://forum.vuejs.org/t/does-nexttick-work-weirdly/42918/7

关于vue.js:nextTick如何保证数据变化后dom渲染完成?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51296969/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com