What is the VueJS lifecycle

This is the process from creation to destruction of vUE instances. Each Vue instance goes through a series of initialization procedures from creation to destruction — for example, you need to set up data listeners, compile templates, mount the instance to the DOM, and update the DOM as the data changes. Functions called lifecycle hooks are also run along the way, giving users the opportunity to add their own code at different stages.

  • BeforeCreate: The data is not listened on yet, is not bound to the vUE object instance, and is not mounted

  • Created: Data is already bound to an object instance, but the object is not yet mounted (using Ajax, you can query data in this method and call functions)

  • BeforeMount: The template is compiled, and the corresponding element object is generated based on the data and template, associating the data object with the object’s

    The EL attribute is an HTMLElement object. At this stage, the vue instance creates the HTML fragment using the native createElement method, ready to be injected into the mount point of the EL attribute specified by our vue instance

  • Mounted: / / if (el).html(el) is mounted in jquery, it generates a dom. / / If (el).html(el) is mounted in jquery, it generates a DOM. After that, we can use methods to get the DOM object under the EL element and do various things with it, calling beforeUpdate and updated methods when our data changes

  • BeforeUpdate: Before the data is updated to the DOM, we can see that the $EL object has been modified, but the DOM data on our page has not changed yet

  • The minimal path to the DOM structure of the page will be found based on the principles of the virtual DOM, and the changes will be updated to the DOM to complete the update

  • BeforeDestroy, Destroyed: The vue instance still exists, but unbinds the listener of the event and the watcher object data to the View (data driven)

The Demo presentation:

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title>01_vue entry </title> <script SRC =".. / js/vuejs - 2.5.16. Js "> < / script > < / head > < body > < div id =" app "> < div id =" MSG "> {{message}} < / div > < / div > < script > var vue = New Vue({// indicates that the current Vue object takes over the div area el: '#app', // defines the data data: {message: 'hello word', }, methods:{ showMsg(msg, obj) { console.log(msg); // The name of the hook function,obj is the vue object console.log("data:" + obj. Console. log("el element :" + obj.$el); Console. log(" Element contents :" + document.getelementById ("app").innerhtml); BeforeCreate () {this.showMsg('-- beforeCreate-- ', this); } / / created: Created () {// Created when the hook function is executed, the vue object is already created, The data model in the vue object is already created // so we can send an asynchronous request to the server to get data and assign to the data model this.message = "hello world" this.showMsg('-- created-- ', this); }, //beforeMount: The template is already compiled and elements are already generated according to the data and template. Associate the data object with the object's beforeMount() {this.showMsg('-- --', this); //mounted: // create a dom on the page in jquery. // Mounted: // create a DOM on the page in jquery. After that, we can use methods to get the DOM object under the EL element and do all sorts of things when our data changes, BeforeUpdate and updated methods mounted() {this.showMsg('-- mounted-- ', this); }}); </script> </body> </html>Copy the code

summary

  1. Created () hook function, the data model can be assigned, so we can send an asynchronous request in this hook function, get the response data and assign to the data model (important).
  2. Mounted () hook is mounted to retrieve the contents of a view