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

Question

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

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

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

小提琴中的例子

Answer 1

根据这个Github“问题”，有一些“时髦”的事情正在发生Vue.nextTick。看来该nextTick函数实际上是在 DOM 即将重新渲染之前触发的。nextTick将在 DOM 显示loadingdiv 之前触发，并在完成后立即隐藏nextTick。Github 问题中有一些建议，但并非所有建议都有效。

他们让它发挥作用的唯一方法是你setTimeout延迟使用。将延迟设置为 1 毫秒并不能始终保证 DOM 更新，因此建议使用 25 毫秒左右。我知道这并不是你真正想要的，但这是我能找到的全部。希望您能从 Github 链接中得到一些用处。

JSFiddle 示例