当我在.vue文件中有一个Vue组件时,数据成员isLoading：false,以及一个模板：
一个方法：
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更新.控制台日志读取该项目已“显示”(删除显示：无样式).但是,在Chrome和Firefox中,我从未看到“正在加载…”指示器;发生短暂延迟,并且在没有显示加载指示符的情况下发生其他DOM更改.
如果我使用setTimeout而不是$nextTick,我将看到加载指示符,但仅当其他工作足够慢时.如果有十分之几秒的延迟,则加载指示器永远不会显示.我希望它能立即出现在点击中,以便我可以呈现一个快速的GUI.
最佳答案
根据这个Github ‘issue’,Vue.nextTick有一些’时髦’的业务.似乎nextTick函数实际上在DOM即将重新渲染之前触发.在DOM可以显示加载div之前将触发nextTick,并在nextTick完成后立即隐藏. Github问题中有一些建议,但并非所有建议都有效.
他们使用它的唯一方法是使用setTimeout延迟.将延迟设置为1毫秒并不总能保证DOM更新,因此建议使用大约25毫秒.我知道这不是你想要的,但这是我能找到的全部.希望你能从Github链接中获得一些用处.
