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

当我在.vue文件中有一个带有数据成员isLoading: false和模板的Vue组件时:

Loading...
Load it

一个方法:

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更新.控制台日志读取该项目已"显示"(删除display: none样式).但是,在Chrome和Firefox中,我从未看到"正在加载..."指示器; 发生短暂延迟,并且在没有显示加载指示符的情况下发生其他DOM更改.

如果我使用setTimeout而不是$nextTick,我将看到加载指示器,但仅当其他工作足够慢时.如果有十分之几秒的延迟,则加载指示器永远不会显示.我希望它能立即出现在点击中,以便我可以呈现一个快速的GUI.

小提琴中的例子