Vue 基础篇(三)：Vue生命周期理解

1、生命周期图

2、钩子函数讲解

实例code：

<div id="app">
    <h1>{{message}}</h1>
</div>

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 vue生命周期详解 by madman0621 ( @madman0621) on CodePen.

一、beforeCreate

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

二、created

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

三、beforeMount

• 在建立$el成员而且编译HTML模版以后调用beforeMount。此时的HTML尚未挂载到页面上，仍是JavaScript中的虚拟DOM形式存在。

  

四、mounted

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

  

五、beforeUpdate

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

六、updated

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

七、beforeDestroy

• 在实例销毁以前调用。在这一步，实例仍然彻底可用。

八、destroyed

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

3、编译HTML模板优先级

在created执行以后，判断vue实例对象是否有emplate参数选项：
       若是有则将其做为模板编译成render函数；
       若是没有template选项，则将外部HTML做为模板编译；
       可是若是vue实例对象存在自定义render函数，则以render函数中做为模板编译。

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

<div id="app">
    <!--html中定义模板(优先级第三)-->
    <h1>这是在outer HTML中定义的模板</h1>
</div>

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

See the Pen vue渲染模板优先度测试 by madman0621 ( @madman0621) on CodePen.