Javascript – Wait for component rendering in Vue.js

Problem:

Problem in a nutshell

I’m trying to get access to some sort of onRendered lifecycle hook.

What I found out about it

Analogous question: Vue $nextTick in mounted() hook doesn’t work as expected

The reasoning made here is: for efficiency reasons, Vue does not directly render reactive changes but internally collects the changes and once per tick renders the last ‘state’. However, one can wait for the next tick, before making further changes through the use of nextTick.

The user uses the onMounted lifecycle hook, to be sure that the component has been mounted, then he makes changes to the style, then waits for the next tick, to be sure that the changes are rendered before making any more.
What happens, however, is that the last ‘state’ is rendered directly.

You might think that changes happen so fast that it is not noticeable, but if it were, the CSS transition would be triggered.

Proposed solution: instead of waiting for the next tick, create an imperceptible delay (even 0ms) after applying the first style. This seems to work.

My reasoning

In the documentation, it says nextTick is responsible for reactive state changes, but in this case, these are styles and this should be a direct manipulation of the DOM, which Vue shouldn’t catch… or can it?

Regarding onMounted lifecycle hook documentation, although it is not guaranteed that the component is rendered, is written:

This hook is typically used for performing side effects that need access to the component’s rendered DOM …

For these reasons, I would expect any changes to a style, within onMounted, to be immediately rendered and consequently trigger the CSS transition, which does not happen.

Here is a SFC Playground Demo, where the problem and the “solution” are presented. App.vue contains only the logic to reload the component, without reloading the page.

I am not convinced of the solution presented because it relies on the page being loaded or the elements being rendered in a short and hardware-based time. I’m afraid that it could cause problems with heavy loads, furthermore there is a sort of race condition: putting delay around 0ms does not guarantee the expected behavior in 100% of page loads.

I’m looking for a solution (or workaround at most) that doesn’t rely on probability. Furthermore, I would like to delve deeper into the reasons for the behaviors mentioned above.

Solution:

Here’s a good explanation about nextTick() vs. setTimeout().

I think between the two, setTimeout() would actully be what you want. If you’re looking for a more confident solution to your problem, take a completely different approach and use Vue’s built-in Transition component

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

The appear property will start the transition on initial render.

The CSS for your slide transition is then:

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

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

Once you have the transition working on mount, remounting the component will effectively restart it. Changing key is a good way to force this.

App.vue

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

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

Vue Playground