1、组件的生命周期：至一个组件从 创建——>运行——>销毁的过程
2、声明周期函数：由Vue提供的内置函数，伴随组件生命周期按次序自动运行——>钩子函数
3、生命周期的阶段划分
（1）创建阶段：beforeCreate、created、beforeMount、mounted
（2）运行阶段：beforeUpdate、update
（3）销毁阶段
4、钩子函数：vue的内置函数，当Vue组件运行到某个阶段时这些函数会自动运行，不需要用户显式的调用
5、keep-alive组件：是vue的内置组件，用来保持vue组件运行的某种状态，避免被重新渲染
注：组件(页面的组成部件)
1️⃣第一步：创建组件（定义组件），组件文件的扩展名(后缀)可以是.vue，也可以是.js
2️⃣第二步：在使用组件的位置导入，注册组件
3️⃣第三步：使用组件：像html标签一样使用
6、生命周期函数：
（1）beforeCreate：在组件创建之前运行，此时Vue实例的del、data、data中的变量均为undefined
（2）created：表示组件已经创建完成，data、props已经初始化，el还是undefined(组件还是没有挂载到DOM上)
（3）beforeMount：el被绑定(和DOM绑定)，但未挂载
（4）mounted：组件挂载之后，el绑定、组件挂载
（5）beforeUpdate：当组件的内容被改变、隐藏的组件被显示、显示的组件被隐藏等触发
（6）beforeDestory：在组件销毁之前，组件还是正常使用
（7）destroyed：组件销毁之后
<div id="app">
<p>{{ message }}</p>
<keep-alive>
<my-components msg="hello" v-if="show"></my-components>
</keep-alive>
</div>
<script>
//定义子组件
const child = {
template:`<div>我是子组件:{{msg}}</div>`, //子组件的html模板内容
props:['msg'], //接受父组件传递的msg
data:function(){
return {
childMsg:'child'
}
},
deactivated: function(){ //钩子函数：在组件非运行时触发
console.log('component deactivated!');
},
activated:function(){ //钩子函数：在组件运行时触发
console.log('component activated')
}
}
//创建vue实例：和DOM中的id为app的元素绑定
var app = new Vue({
el:'#app',
components:{ //注册子组件
'my-component':child
},
data:function(){
return {
message:'父组件',
show:true
}
},
//3、定义生命周期函数
beforeCreate: function(){
console.group('beforeCreate 创建前状态------------>');
let state = {
'el':this.$el,
'data':this.$data,
'message':this.message
}
console.log(state);
},
created:function(){
console.group('created 创建完毕状态------------>');
let state = {
'el':this.$el,
'data':this.$data,
'message':this.message
}
console.log(state);
},
beforeMount:function(){
console.group('beforeMount 挂载前状态------------>');
let state = {
'el':this.$el,
'data':this.$data,
'message':this.message
}
console.log(this.$el)
console.log(state);
},
mounted:function(){
console.group('mounted 挂载结束状态------------>');
let state = {
'el':this.$el,
'data':this.$data,
'message':this.message
}
console.log(state);
},
beforeUpdate:function(){
console.group('beforeUpdate 更新前状态------------>');
let state = {
'el':this.$el,
'data':this.$data,
'message':this.message
}
console.log(state);
console.log(this.$el);
console.log('beforeUpdate == '+document.getElementsByTagName('p')[0].innerHTML);
},
updated:function(){
console.group('updated 更新完成状态------------>');
let state = {
'el':this.$el,
'data':this.$data,
'message':this.message
}
console.log(state);
console.log(this.$el);
console.log('beforeUpdate == '+document.getElementsByTagName('p')[0].innerHTML);
},
beforeDestroy:function(){
console.group('beforeDestroy 销毁前状态------------>');
let state = {
'el':this.$el,
'data':this.$data,
'message':this.message
}
console.log(state);
console.log(this.$el);
},
destroyed:function(){
console.group('destroyed 销毁完成状态------------>');
let state = {
'el':this.$el,
'data':this.$data,
'message':this.message
}
console.log(state);
console.log(this.$el);
},
components:{
'my-components':child
}
})
</script>