当我的 .vue 文件中有一个带有数据成员的 Vue 组件时isLoading: false和一个模板：
<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秒左右正在发生。）
我以为$nextTick函数将允许虚拟 DOM 和实际 DOM 更新。控制台日志显示该项目已“显示”（删除了display: none风格）。然而，在 Chrome 和 Firefox 中，我从未看到“正在加载...”指示器；短暂的延迟发生，并且其他 DOM 更改发生，而没有显示加载指示器。
如果我使用setTimeout代替$nextTick，我会看到加载指示器，但只有当其他工作足够慢时。如果有零点几秒的延迟，则加载指示器永远不会显示。我希望它在单击时立即出现，以便我可以呈现一个活泼的 GUI。
小提琴中的示例 https://jsfiddle.net/szal/eywraw8t/500316/
根据这个Github“问题” https://github.com/vuejs/vuex/issues/1023有一些“时髦”的事情正在进行Vue.nextTick。看来nextTick函数实际上在 DOM 即将重新渲染之前触发。nextTick将在 DOM 可以显示之前被触发loadingdiv 并立即隐藏一次nextTick完成。 Github 问题中有一些建议，但并非所有建议都有效。
他们让它发挥作用的唯一方法是如果你使用setTimeout有延迟。将延迟设置为 1 毫秒并不能始终保证 DOM 更新，因此建议使用 25 毫秒左右。我知道这并不是你真正想要的，但这是我能找到的全部。希望您能从 Github 链接中得到一些用处。
JSFiddle 示例 https://jsfiddle.net/n9jmu5v7/29718/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
