After learning the introduction of VUe2. X, I began to gradually get familiar with the mode of VUE and the practice of developing scaffolding projects. I need to have a certain understanding of the lifecycle hook functions.

(I) Vue2. X life cycle diagram

(2) Lifecycle hook function description

Lifecycle hook functions instructions
beforeCreate After instance initialization, data Observer and Event/Watcher events are called before configuration.
created Called after the instance has been created. In this step, the instance completes the configuration of the data Observer property initialization and method operation, and the watch/ Event event callback. However, the mount phase has not yet started and the $EL attribute is not currently visible.
beforeMount Called before the mount begins: The associated render function is called for the first time.
mounted elNewly createdvm.$elReplace and mount the hook to the instance. If root mounts a document element, vm.$el is also in the document when Mounted is called.
beforeUpdate Called when data is updated, before the virtual DOM is re-rendered and patched. You can further change the state in this hook without triggering additional rerendering.
updated This hook is called after the virtual DOM is re-rendered and patched due to data changes. When this hook is called, the component DOM has been updated, so you can now perform DOM-dependent operations.
beforeDestroy Called before instance destruction. At this step, the instance is still fully available.
destroyed Called after the Vue instance is destroyed. When called, everything indicated by the Vue instance is unbound, all event listeners are removed, and all subinstances are destroyed.

(iii) code demonstration

  1. View the display order through the page load of nested components: code as follows (can be copied directly to use) :

    <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial scale=1.0"> <meta http-equiv=" x-UA-compatible "content=" IE =edge" SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < / head > < body > < div id = "vue - app" > < p > here are the component information < / p > < div class="test"> <keep-alive></keep-alive> <test-component v-bind:msg="msg" v-on:msgchange="updateMsg($event)"></test-component> </keep-alive> </div> </div> </body> <script> var child = { props: [' MSG '], template: '<button V-on :click="changeChuanzhi", methods: {{MSG}}</button>' Function () {this.$emit("msgchange", "child sends value to parent "); }}, deactivated: function () {console.log(' Component deactivated! '); }, activated: function () { console.log('component activated'); }}; New Vue({el: '#vue-app', data: {methods: {updateMsg: function (MSG) {this. MSG = MSG; }}, components: {'test-component': child}, // generate cycle example beforeCreate: Function () {alert(" function executed before component instantiation: beforeCreate()"); }, created: function () {alert(" Component instantiated, page not displayed :created()"); }, beforeMount: function () {alert(" Before component mounts, the page is not displayed, but the virtual DOM is already configured :beforeMount()"); }, mounted: function () {alert(" mounted()"); }, beforeUpdate: function () {alert(" Before component updates, the page is not updated, but the virtual DOM is already configured :beforeUpdate()"); }, updated: function () {alert(" Component updated after this method is executed, page displays :updated()"); }, beforeDestroy: function () {alert(" component beforeDestroy: beforeDestroy()"); }, destroyed: function () {alert(" component destroyed: destroyed()"); }, }) </script> </html>Copy the code

    Running results:

  2. View the page load display sequence log through the console: code is as follows (can be directly copied to use) :

    <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial scale=1.0"> <meta http-equiv=" x-UA-compatible "content=" IE =edge" SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < / head > < body > < div id = "vue - app" > < p > here are the component information < / p > < div Class ="test"> <p> {{msg}}</p> <test-component v-bind:msg="msg" v-on:msgchange="updateMsg($event)"></test-component> </div> </div> </body> <script> var child = {props: [' MSG '], data: function () {return {childtofather: 'parent'}}, template: <button V-on :click="changeChuanzhi"> {{MSG}}</button> function () { this.$emit("msgchange", this.childtofather); // Note two arguments: the first argument is the event name, the second argument is the content passed}},}; Var app =new Vue({el: '#vue-app', data: {methods: {updateMsg: function (MSG) {this. MSG = MSG; }}, components: {'test-component': child}, // generate cycle example beforeCreate: Function () {// alert(" function executed before component instantiation: beforeCreate()"); Console. Group (' beforeCreate created before the state = = = = = = = = = = = = = = = ""); var state1 = { 'el': this.$el, 'data': this.$data, 'msg': this.msg } console.log(state1); }, created: function () {// alert(" Component instantiated, page not displayed :created()"); Console. group('created created state =============== '); var state2 = { 'el': this.$el, 'data': this.$data, 'msg': this.msg } console.log(state2); }, beforeMount: function () {// alert(" Before component mounts, the page is not displayed, but the virtual DOM is already configured :beforeMount()"); Console. Group (' beforeMount state before mount = = = = = = = = = = = = = = = ""); var state3 = { 'el': this.$el, 'data': this.$data, 'msg': this.msg } console.log(this.$el); console.log(state3); }, mounted: function () {// alert(" mounted()"); Console. group('mounted end state =============== '); var state4 = { 'el': this.$el, 'data': this.$data, 'msg': this.msg } console.log(this.$el); console.log(state4); }, beforeUpdate: function () {// alert(" Before component updates, the page is not updated, but the virtual DOM is already configured :beforeUpdate()"); Console. Group (' beforeUpdate update status before = = = = = = = = = = = = = = = ""); var state5 = { 'el': this.$el, 'data': this.$data, 'msg': this.msg } console.log(this.$el); console.log(state5); Debugger}, updated: function () {// alert(" Component updated, this method executed, page displays :updated()"); Console. group('updated completed status =============== '); var state6 = { 'el': this.$el, 'data': this.$data, 'msg': this.msg } console.log(this.$el); console.log(state6); }, beforeDestroy: function () {// alert(" component beforeDestroy: beforeDestroy()"); Console. Group (' beforeDestroy destroyed former state = = = = = = = = = = = = = = = ""); var state7 = { 'el': this.$el, 'data': this.$data, 'msg': this.msg } console.log(this.$el); console.log(state7); }, destroyed: function () {// alert(" component destroyed: destroyed()"); Console. Group (' destroyed destroyed completion status = = = = = = = = = = = = = = = ""); var state8 = { 'el': this.$el, 'data': this.$data, 'msg': this.msg } console.log(this.$el); console.log(state8); }, }) </script> </html>Copy the code

    A brief explanation of the structure:

    (1) Create a Vue root instance named vue-app and mount it to the DOM element with the page ID vue-app.

    (2) Locally register a component child and register it in the root instance so that it can be used in the root instance scope.

    (3) Wrap the sub-components to prepare for the next test.

    (4) Open the console of developer tools to view the result:

Results analysis

1. BeforeCreate: data and EL are not initialized, and the value is undefined.



2. Created execution: The data object observed by the Vue instance has been configured and the value of VUe-app. MSG can be obtained, but the root DOM element el used by the Vue instance has not been initialized.



BeforeMount execution: data and EL are initialized, but it can be seen from the data displayed on {{MSG}} and other pages that EL does not render data at this time, the value of EL is the element node of the “virtual” DOM;

Mounted: The EL has been rendered and mounted to the instance. The page is displayed.

BeforeUpdate execution: updates the current component data but does not render it on the page;

6. Updated: Current component data is updated and rendered on the page;

BeforeDestroy and Destroyed when executing: Everything indicated by the Vue instance is unbound, all event listeners are removed, and all subinstances are destroyed. Note: Destruction does not mean ‘erasing’, but rather ‘untying’.

To verify this, the console enters:app.msg='super456'The page {{MSG}} is not displayed, the result is:

(4) Some hook function applications

1. The beforeCreate hook can be loaded with animation such as loading. 2. Created hooks can operate on data data. Ajax requests can be made to data, and network interface requests can be made. 3. In the Mounted hook, you can perform operations on the MOUNTED DOM or obtain data in the background.

(5) Literature reference

Special thanks to: author: HXGZJResearch and understanding of vue. JS2.0 life cycleThis article is very detailed analysis, after reading the reference to write a case out. There are a lot of references in the content.