Vue life cycle

The process from creation to destruction of a Vue instance, which is accompanied by self-calls to functions called hook functions.

Overview of the three phases of the Vue life cycle

1. Mount (create) : initialization properties – > beforeCreate, created, beforeMount, mounted

2. Update (run): Changes to elements or components ->beforeUpdate,updated

3. Destroy: Destroy related properties ->beforeDestroy, Destroyed

  • BeforeCreate (before initialization bounds)

  • Created (after initializing the interface)

  • BeforeMount (before rendering dom)

  • Mounted (after rendering dom)

  • BeforeUpdate (Before updating data)

  • Updated (after data is updated)

  • BeforeDestroy (Before uninstalling components)

  • Destroyed (after uninstalling components)

The question is: what did new Vue do

This means that tempalte is compiled and then mounted to the DOM element specified by EL, during which time it performs some functions, namely life cycle functions

< div id = "app" > < div id = "h3" > {{MSG}} < / div > < input type = "button" value = "MSG" @ click = "MSG = 'no'" > < / div >Copy the code
// var vm =new Vue instance object //1. Init Events & Lifecycle an empty Vue instance object has been initialized. Var vm = new Vue({el: '#app', data: {MSG: 'init'}, methods: {show() {console.log(' show method executed '); }}, beforeCreate() {console.log(this.msg);}}, beforeCreate() {console.log(this.msg); //undefined //this.show(); }}}}}}}}}}}}}}}}Copy the code
Created () {//2. This is the second lifecycle function console.log(this.msg); // Initialize this.show(); // Data and methods are already initialized in created. // If you want to call methods or manipulate data in created, you can only do it in created.Copy the code
// if there is an EL and templete in the template, execute the instructions in vue, and finally generate a compiled template string in memory. This template string is then rendered as an in-memory DOM without mounting the template to the real page beforeMount() {//3. This is the third lifecycle function where the template is compiled but not rendered into the page console.log(document.getelementById ('h3').innertext); //{{msg}} }, ``` mounted() { //4. //mounted specifies the last life cycle function to mount the template to the page. The template in memory has been mounted to the page console.log(document.getelementByID ('h3').innertext); BeforeUpdate,updated, she twice at least 0 times, representing data data never changes. BeforeUpdate () {//5. This is the fifth life cycle function. The interface is not updated. The data updates console.log(' The contents of the interface element: ${document.getelementById ('h3').innertext} '); // Initialize console.log(' data '${this.msg}'); // Data in data no // Define button changes MSG value, then beforeUpdate function is executed automatically, interface displays data is old, but data is up to date}, ' 'updated() {//6. This is the sixth life cycle function, the interface is updated, and the data is updated console.log(' The contents of the interface element: ${document.getelementById ('h3').innertext} '); No console.log(' data '${this.msg}'); //data no},Copy the code
BeforeDestroy (){//7. This is the seventh life cycle function where all data is available},Copy the code
Destroyed (){//8. Component is destroyed completely, all data, methods, and instructions are destroyed}})Copy the code

Someone asked me, which lifecycle should asynchronous requests be placed in?

Created and Mounted can be created, but the specific requirements depend on the business scenario

  • In Mounted, async requests should be made when a component is invoked as a child, because the child may need to perform operations on the DOM.

  • For page-level components, only Created is available when we need to use SSR (server-side rendering), so this is the only way to request data;

  • For page-level components, when we do asynchronous operations involving DOM access, we can still only use Mounted.

  • For general cases, both created and Mounted are ok.

When Mounted is called, vue does not guarantee that all subcomponents will be mounted, so if you want to render the whole view before performing the operation, use $nexttick as follows:

mounted: function () { this.$nextTick(function () { // Code... })}Copy the code
  • $Nexttick ‘itself receives a callback function that actually delays the execution of the code inside, similar to setTimeout.

Based on the above results, we know that in most cases there is no difference between creating and Mounted for asynchronous requests, but we need to choose one of the above scenarios. In my custom, page-level components are called in Created (mounted). In this way, they are distinguished from child components that need to be called in Mounted.