javascript – 如何使用Vue立即显示元素,例如加载指示符？ nextTick没有按照我的预期工作

当我在.vue文件中有一个Vue组件时,数据成员isLoading：false,以及一个模板：

hey" ref="hey">Loading...

一个方法：

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.

Example in a fiddle

最佳答案

根据这个Github ‘issue’,Vue.nextTick有一些’时髦’的业务.似乎nextTick函数实际上在DOM即将重新渲染之前触发.在DOM可以显示加载div之前将触发nextTick,并在nextTick完成后立即隐藏. Github问题中有一些建议,但并非所有建议都有效.

他们使用它的唯一方法是使用setTimeout延迟.将延迟设置为1毫秒并不总能保证DOM更新,因此建议使用大约25毫秒.我知道这不是你想要的,但这是我能找到的全部.希望你能从Github链接中获得一些用处.

JSFiddle with examples