vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
在浏览器中运行，打开console查看
<!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
},
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)); //undefined
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("%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("%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("%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("%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("%c%s", "color:red","data : ", this.$data);
console.log("%c%s", "color:red","message: " , this.message)
}
})
</script>
</html>
activated,deactivated生命周期的用法：当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
activated进入组件时候执行 deactivated离开组件时执行
参考：https://segmentfault.com/a/1190000011381906
https://www.jianshu.com/p/0272c0fe9392
