如何使用Vue立即显示元素，例如加载指示符？ nextTick没有按照我的预期工作 [英] How to show a element immediately, such as a loading indicator, with Vue? nextTick isn't working as I expect
问题描述
当我在.vue文件中有一个Vue组件时，数据成员 isLoading：false ，以及一个模板：
When I have a Vue component in a .vue file with a data member isLoading: false, and a template:
<div v-show="isLoading" id="hey" ref="hey">Loading...</div>
<button @click="loadIt()">Load it</button>
方法：
loadIt() {
this.isLoading = true
this.$nextTick(() => {
console.log(this.$refs.hey)
// ...other work here that causes other DOM changes
this.isLoading = false
})
}
（这里的加载是指从内存中加载，而不是AJAX请求。我想这样做，这样我就可以显示一个简单的加载 当DOM发生变化时，指示器会立即显示，可能需要0.2-0.5秒左右。
("Loading" here refers to loading from the in-memory store, not an AJAX request. I want to do this so that I can show a simple "loading" indicator instantly while the DOM changes that might take 0.2-0.5 second or so are occurring.)
我认为 $ nextTick function将允许虚拟和实际DOM更新。控制台日志读取该项目已显示（删除 display：none 样式）。但是，在Chrome和Firefox中，我从未看到正在加载...指示器;发生短暂延迟，其他DOM更改发生时没有显示加载指示符。
I thought that the $nextTick function would allow both the virtual and actual DOM to update. The console log reads that the item was "shown" (removing the display: none style). However, in both Chrome and Firefox, I never see the "Loading..." indicator; the short delay happens, and the other DOM changes happen without the Loading indicator being shown.
如果我使用 setTimeout 而不是 $ nextTick ，我将看到加载指示符，但仅当其他工作足够慢时。如果有十分之几秒的延迟，则加载指示器永远不会显示。我希望它能立即出现在点击中，以便我可以呈现一个快速的GUI。
If I use setTimeout instead of $nextTick, I will see the loading indicator, but only when the other work is sufficiently slow. If there is a delay of a few tenths of a second, the loading indicator never shows. I'd like it to appear immediately on click so that I can present a snappy GUI.
推荐答案
根据这个 Github'问题'有一些时髦的业务正在进行 Vue.nextTick 。看来 nextTick 函数实际上是在DOM即将重新渲染之前触发的。 nextTick 将在DOM显示 loading div之前触发，并在 nextTick后立即隐藏结束。在Github问题中有一些建议，但并非所有这些都有效。
According to this Github 'issue' there is some 'funky' business going on with Vue.nextTick. It appears that the nextTick function actually fires just before the DOM is about to re-render. nextTick will be fired before the DOM can show the loading div and immediately gets hidden once nextTick finishes. There are some suggetions in the Github issue but not all of them work.
他们使用它的唯一方法是使用 setTimeout 有延迟。将延迟设置为1毫秒并不总能保证DOM更新，因此建议使用大约25毫秒。我知道这不是你想要的，但这是我能找到的全部。希望你能从Github链接中获得一些用处。
The only way they got it to work is if you use setTimeout with a delay. Setting the delay to 1 millisecond won't always guarantee a DOM update, so it is suggested to use around 25 milliseconds. I know this isn't really what you wanted but it's all I could find. Hopefully you get some use out of the Github link.
这篇关于如何使用Vue立即显示元素，例如加载指示符？ nextTick没有按照我的预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
