第二章：vue2组件的生命周期钩子函数

一、生命周期钩子函数

对于前端的vue,react,angular的几大框架来说,说到生命周期钩子函数可能会想到react,vue中也有生命周期钩子函数

二、生命周期钩子函数

• 1、beforeCreate组件实例刚创建,在计算属性之前(比如计算data属性)
• 2、created组件实例创建完成,属性已经绑定,但是DOM还未生成($el属性还不存在)
• 3、beforeMount挂载之前
• 4、mounted被创建
• 5、beforeUpdate组件数据更新前
• 6、updated组件数据更新后
• 7、activated组件被激活时调用
• 8、deactivated组件被移动时调用
• 9、beforeDestroy销毁之前调用
• 10、destroyed销毁之后调用

三、书写全部的钩子函数

• 1、html代码

  <div id="app">    <p>{{ message }}</p>    <input type="button" value="增加" @click="add" />    <input type="button" value="销毁" @click="destroy" /></div>

• 2、javascript代码

  var app = new Vue({    el: '#app',    data: {        message: 1    },    methods: {        add() {            this.message++;        },        destroy() {            app.$destroy()        }    },    beforeCreate: function() {        console.group('beforeCreate 创建前状态===============');        console.log("%c%s", "color:red", "el     : " + this.$el); //undefined        console.log("%c%s", "color:red", "data   : " + this.$data); //undefined         console.log("%c%s", "color:red", "message: " + this.message)    },    created: function() {        console.group('created 创建完毕状态===============');        console.log("%c%s", "color:red", "el     : " + this.$el); //undefined        console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化         console.log("%c%s", "color:red", "message: " + this.message); //已被初始化    },    beforeMount: function() {        console.group('beforeMount 挂载前状态===============');        console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化        console.log(this.$el);        console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化          console.log("%c%s", "color:red", "message: " + this.message); //已被初始化      },    mounted: function() {        console.group('mounted 挂载结束状态===============');        console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化        console.log(this.$el);        console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化        console.log("%c%s", "color:red", "message: " + this.message); //已被初始化     },    beforeUpdate: function() {        console.group('beforeUpdate 更新前状态===============');        console.log("%c%s", "color:red", "el     : " + this.$el);        console.log(this.$el);        console.log("%c%s", "color:red", "data   : " + this.$data);        console.log("%c%s", "color:red", "message: " + this.message);    },    updated: function() {        console.group('updated 更新完成状态===============');        console.log("%c%s", "color:red", "el     : " + this.$el);        console.log(this.$el);        console.log("%c%s", "color:red", "data   : " + this.$data);        console.log("%c%s", "color:red", "message: " + this.message);    },    beforeDestroy: function() {        console.group('beforeDestroy 销毁前状态===============');        console.log("%c%s", "color:red", "el     : " + this.$el);        console.log(this.$el);        console.log("%c%s", "color:red", "data   : " + this.$data);        console.log("%c%s", "color:red", "message: " + this.message);    },    destroyed: function() {        console.group('destroyed 销毁完成状态===============');        console.log("%c%s", "color:red", "el     : " + this.$el);        console.log(this.$el);        console.log("%c%s", "color:red", "data   : " + this.$data);        console.log("%c%s", "color:red", "message: " + this.message)    },    beforeDestroy: function() {        console.log('销毁之前');    },    destroyed: function() {        console.log('销毁之后');    }})