Vue生命周期及其钩子函数

vue的生命周期、生命周期函数，又叫钩子函数

生命周期钩子===生命周期函数===生命周期事件

一、Vue生命周期

1、vue实例从创建到销毁的过程

2、vue生命周期有4个阶段

3、父子组件执行顺序

二、钩子函数

1、钩子函数三个阶段

2、vue第一次加载页面会执行哪几个钩子

3、vue中常用的钩子

三、代码实现

1、代码案例

2、执行结果

3、分析总结

一、Vue生命周期

1、vue实例从创建到销毁的过程

2、vue生命周期有4个阶段

阶段一：创建（创建vue实例）
阶段二：挂载（data数据渲染到el上）
阶段三：更新（检测data变化并更新el）
阶段四: 销毁（解除data与el的绑定关系）

3、父子组件执行顺序

挂载：父created -> 子created -> 子mounted> 父mounted
更新：父beforeUpdate -> 子beforeUpdated -> 子updated -> 父updated
销毁：父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

二、钩子函数

1、钩子函数三个阶段

挂载阶段：beforeCreate、created、beforeMounted、mounted
更新阶段：beforeUpdate、updated
销毁阶段：beforeDestroy、destroyed

1、beforeCreate ：创建vue实例前。这个钩子就是 data中的数据还没有创建，拿不到数据
2、created：vue实例创建完成。这个钩子就是data / methods / computed中的数据已经创建了，可以访问到数据
3、beforeMount ： data数据还没有渲染el或者$montd上面。这个钩子就是el或着$montd已经完成了创建，但是还没有进行渲染到页面
4、mounted ：完成挂载，data中的数据渲染到页面上。这个钩子就是已经完成了渲染
5、beforeUpdate：数据更新前（检测数据发生了变化，但是真是DOM元素页面还没有更新）
6、updated：完成数据的更新（把data中修改后的数据渲染到DOM页面上）
7、beforeDestroy：vue实例销毁前，这个钩子就是解除了data和el的绑定关系
应用场景：一般用来清除定时器/全局事件
8、destroyed 完成销毁

2、vue第一次加载页面会执行哪几个钩子

1、创建vue的实例之前：beforeCreate

2、创建vue实例后：created

3、挂载前：beforemount

4、挂载后（初始的渲染，将data中的数据渲染到el上）：mounted

3、vue中常用的钩子

1、created：完成data数据创建（一般用于发送axios的请求）

2、mounted：完成了初始的渲染，data中的数据渲染到el上，但没有加载到页面上

三、代码实现

1、代码案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<div id="app">
<h1 id="ape">{{message}}</h1>
</div>
<script src="js/vue.min.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
message:'APESOURCE'
},
computed:{},
watch:{},
// beforeCreate vue实例创造前
beforeCreate(){
console.log('vue实例创建前');
console.log('----------'+this.$el);
console.log('----------'+this.$data)
console.log('----------'+this.message);
},
//vue实例创造之后，可以操作数据
created:function(){
console.log('vue实例创建后');
console.log('----------'+this.$el);
console.log('----------'+this.$data)
console.log('----------'+this.message);
},
// DOM挂载前
beforeMount:function(){
console.log('DOM挂载前');
// 此时的$el为虚拟的DOM节点
console.log('----------'+this.$el);
console.log('----------'+this.$data);
console.log(document.querySelector('#ape').innerHTML);
},
// DOM挂载后
mounted :function() {
console.log('DOM挂载后');
// 此时的$el为真是的DOM节点
console.log('----------'+this.$el);
console.log('----------'+this.$data);
console.log(document.querySelector('#ape').innerHTML);
},
methods:{
}
})
</script>
</body>
</html>

2、执行结果

3、分析总结

vue实例创建前：输出的都显示的没有定义
vue实例创建后：实例创建后，可以操作数据
DOM挂载前：第三个数据时虚拟DOM
DOM挂载前：第三个数据时真实的DOM