等待Vue.js中的组件渲染

Question

问题简而言之

我正在尝试访问某种

onRendered

生命周期挂钩。

我发现了什么

类似问题：mounted() 钩子中的 Vue $nextTick 无法按预期工作

这里的推理是：出于效率原因，Vue 不会直接渲染响应式更改，而是在内部收集更改，并且每个tick 渲染一次最后的“状态”。但是，可以等待下一个刻度，然后再通过使用

nextTick

进行进一步更改。

用户使用

onMounted

生命周期钩子，以确保组件已安装，然后对样式进行更改，然后等待下一个刻度，以确保在进行更多更改之前渲染更改。 然而，发生的情况是最后一个“状态”是直接渲染的。

您可能会认为变化发生得如此之快以致于不易察觉，但如果是这样，就会触发 CSS 转换。

建议的解决方案：不要等待下一个刻度，而是在应用第一个样式后创建一个难以察觉的延迟（甚至 0 毫秒）。这似乎有效。

我的推理

在 documentation 中，它说

nextTick

负责 reactive state 变化，但在本例中，这些是样式，这应该是对 DOM 的直接操作，Vue 不应该捕获...或者可以吗？

关于

onMounted

生命周期钩子文档，虽然不能保证组件能够渲染，但写的是：

此钩子通常用于执行需要访问组件的 rendered DOM ...

的副作用

出于这些原因，我希望在

onMounted

内对样式进行任何更改都会立即渲染，从而触发 CSS 转换，但这种情况不会发生。

这里是一个 SFC Playground 演示，其中介绍了问题和“解决方案”。

App.vue

仅包含重新加载组件的逻辑，而不重新加载页面。

我不相信所提出的解决方案，因为它依赖于正在加载的页面或在短时间内基于硬件的时间渲染的元素。我担心它可能会导致重负载问题，此外还有一种竞争条件：将延迟设置在 0 毫秒左右并不能保证 100% 页面加载时的预期行为。

我正在寻找一种不依赖概率的解决方案（或最多是解决方法）。此外，我想更深入地探究上述行为的原因。

Answer 1

这里有一个关于 nextTick() 与 setTimeout() 的很好的解释。

我认为在两者之间，

setTimeout()

实际上就是你想要的。如果您正在寻找更可靠的问题解决方案，请采取完全不同的方法并使用 Vue 的内置 Transition 组件

<Transition name="slide" appear>
  <div ref="blockRef" class="block"></div>
</Transition>

appear

属性将在初始渲染时开始过渡。

幻灯片切换的 CSS 是：

.block {
    ...
    top: 26vh  /* transition end state */
}

.slide-enter-active {
    transition: top 3s linear 0s
}
.slide-enter-from {
    top: 0
}
.slide-enter-to {
    top: 26vh
}

一旦在安装上进行了转换，重新安装组件将有效地重新启动它。更改 key 是强制执行此操作的好方法。

应用程序.vue

const myRef = ref(true);
async function restart() {
  myRef.value = !myRef.value
} 

<button @click="restart">Restart</button>
<Comp :key="String(myRef)" />

Vue 游乐场