Prepared Vue 2 Hook

Question

Vue 2, is there a lifecycle hook that actually refers to “off-the-shelf rendering”? I want to put a loading screen on entering the page, and it disappears and shows the contents of the page as soon as Vue finishes loading everything, but I tried most of the life cycle but didn't work. Here is what I will try to do if updated refers to "off-the-shelf rendering":

 updated(){ this.loaded() }, methods:{ loaded(){ var vm = this; this.loading = false; } } 

If there is no such hook in the life cycle, what would you suggest me to do instead? Thanks

Answer 1

Perhaps the method you are looking for, mounted() , starts when the vue component is ready. You can check the Vue lifecycle documentation here

your Vue instance will probably look something like this:

  var app = new Vue({ el: '#app', /* * When the instance is loaded up */ mounted: function () { this.loaded() } methods: { loaded: function () { var vm = this this.loading = false } } }) 

Answer 2

To make sure all child components are also installed, use vm.$nextTick - much cleaner than setTimeout:

 mounted: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) } 

Source: https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

Answer 3

Since I cannot find that there is a specific lifecycle hook or other Vue-specified method to hook the point where the rendering ended, I used the basic js code, as well as an estimate of the time it takes to load all things with the codes as follows:

 mounted(){ this.loaded() }, methods:{ loaded(){ var vm = this; setTimeout(function(){ vm.loading = false }, 3000); } } 

I hope that someone will be strong in Vue and will give a new answer in order to connect it more accurately.

Answer 4

Until the end of the / html template, you can write:

 {{ updated() }} 

I hope this helps.

Answer 5

Actually, your answer to your question is not what you originally asked, the Vue instance is displayed in less than a second, and it is impossible to use any interceptors only to create a custom loader. The use of the setTimeout function is the only solution to this. But the component is ready in the DOM way before 3 seconds.

The best approach for this purpose is to use a loader component in which you will have setTimeout in the created hook, and after that time it will throw an event to the parent element. Therefore, inside the application, you only need to import the loader component itself, and when the event fires, change the internal logical property of the data to display another v-if component