<!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">
<title>vue生命周期</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
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);//undefined
console.log('beforeCreate:刚刚new Vue()之后,这个时候,数据还没有挂载呢,只是一个空壳');
},
created: function() {
debugger; //测试使用
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); //已被初始化
console.log('created:这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数');
console.log('在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取');
console.log('接下来开始找实例或者组件对应的模板,编译模板为虚拟dom放入到render函数中准备渲染');
},
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);//已被初始化
console.log('beforeMount:虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated');
console.log('在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取');
console.log('接下来开始render,渲染出真实dom');
},
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);
console.log('beforeUpdate:重新渲染之前触发');
console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染');
},
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);
//这里不能更改数据,否则会陷入死循环
console.log('updated:数据已经更改完成,dom也重新render完成');
},
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);
console.log('beforeDestory:销毁前执行($destroy方法被调用的时候就会执行),一般在这里善后:清除计时器、清除非指令绑定的事件等等...');
},
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);
console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳,这里也可以善后');
}
})
</script>
</html>
总结如下:
生命周期图及demo验证显示总结:
- 调用beforeCreate之前,仅仅初始化了vue实例(都为undefined);
- 调用created之前,已经进行了数据的初始化、属性和方法的运算以及watch/event事件回调,但还没有将其挂载(此时页面的数据已经获取到,如message=‘vue’ 的周期,el=‘undefined’)
*调用beforeMount之前,先判断vue实例是否有el属性
- 当vue实例没有el属性时,就会停止编译,即beforeMount,mounted钩子函数不会执行。此时只有手动调用vm.$(el)将el挂载在页面后,才能调用这两个钩子函数。
- 当vue实例有el属性时,如果vue实例中有template属性(用来包含组件的标签),会把它当做render函数处理,该子组件的内容会替换掉页面中定义的内容。
- 调用mounted之前,vue实例可以继续添加el属性,内容也会随之覆盖(此时,才将用户定义的内容显示在页面,之前只是用{{ message }}进行占位)
- 当vue实例的数据发生更新时,可以调用beforeUpdate和updated钩子函数
- 在vue实例销毁之前,可以调用beforeDestory钩子函数;在vue实例销毁后,可以调用destoryed钩子函数,此刻该vue实例指向的所有东西都会解绑定,所有的事件监听器都会被移除,所有的子实例也会被销毁。
Vue用法
- Vue实例中钩子函数有:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed;
- 在创建vue实例时,能够调用的钩子函数:beforeCreate、created、beforeMount、mounted;
- 当Vue实例的数据(data)发生改变时,会进行对应组件的重新渲染,能够调用的钩子:beforeUpdate,updated;
- 在Vue实例销毁前能调用钩子beforeDestroy,销毁后能够调用钩子destroyed。