Vue 基础篇(三)：Vue生命周期理解-白红宇

一、生命周期图

二、钩子函数讲解

实例code：


        
     {
   {message}}
    
var vm = new Vue({    el: '#app',    data: {      message: 'Vue的生命周期'    },    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('真实dom结构：' + document.getElementById('app').innerHTML);      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('真实dom结构：' + document.getElementById('app').innerHTML);      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)    }  })复制代码

See the Pen by madman0621 ( ) on .

1、beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

2、created

在进行初始化事件、数据观测之后调用created。此时的data属性已经进行了数据绑定

3、beforeMount

在创建$el成员并且编译HTML模版之后调用beforeMount。此时的HTML还没有挂载到页面上，还是JavaScript中的虚拟DOM形式存在。

4、mounted

在将编译好的HTML挂载到页面之后调用mounted。此时页面内容显示已经正常。

5、beforeUpdate

在触发对应组件的重新渲染，但是此时页面实际的DOM内容还没有开始改变时调用beforeUpdate。此时页面的DOM内容还未更新

6、updated

在触发对应组件的重新渲染并且页面实际的DOM内容改变之后调用beforeUpdate。此时页面的DOM内容已经更新完毕

7、beforeDestroy

在实例销毁之前调用。在这一步，实例仍然完全可用。

8、destroyed

在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

三、编译HTML模板优先级

在created执行之后，判断vue实例对象是否有emplate参数选项：

如果有则将其作为模板编译成render函数；

如果没有template选项，则将外部HTML作为模板编译；

但是如果vue实例对象存在自定义render函数，则以render函数中作为模板编译。

总结优先度为：render函数选项 > template选项 > outer HTML。


        
         
     这是在outer HTML中定义的模板
    
var vm = new Vue({    el: '#app',    //在vue配置项template中定义模板（优先级第二）    template: "这是在template中定义的模板
",     data: {      message: 'Vue的生命周期'    },    //在render中定义模板（优先级第一）    render: function(createElement) {        return createElement('h1', '这是在render函数中定义的模板')    }})复制代码