一、生命周期图
二、钩子函数讲解
实例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)
}
})
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。
<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函数中定义的模板')
}
})
