javascript - 如何使用 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。

Example in a fiddle

Answer 1

根据这个Github 'issue' Vue.nextTick 正在进行一些“时髦”的业务。似乎 nextTick 函数实际上在 DOM 即将重新呈现之前触发。 nextTick 将在 DOM 可以显示 loading div 之前触发，并在 nextTick 完成后立即隐藏。 Github 问题中有一些建议，但并非所有建议都有效。

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

JSFiddle with examples