How to get rid of flickering when loading elements hidden with v-if?

Question

Vue.js

There are a few divs that are initially hidden like this, where the variable is on=false from the start:
<div v-if="(on)">

Vue ({
    data: on=false
});

At the same time, when the page is loaded, this div element is visible on the screen for a while. Of course, I can make it display:none in CSS first, and then “uncover” it, but I don’t want to complicate it. Yes, and I want to understand the reason why it is not working now.

Answer 1

The template should not be in .html (which is loaded before Vue is initialized), but in the template property of the component being created

Vue.component('comp', {
template: '...'
});

which is called in the render of the Vue instance

new Vue({
el: '#app'
});

.html
<div id="app"><comp></comp></div>

Answer 2

Firstly, if the element is likely to be visible on the page sooner or later, it is better to hide it with v-show, this is easier than rebuilding the DOM;
Secondly, if it flashes, then the flag of its display often changes;
Thirdly, you can use transition/transition-group so that it doesn't "flicker".

Answer 3

https://medium.com/vuejs-tips/v-cloak-45a05da28dc4