Vue生命周期及其钩子函数

Orangefishs_

4254人浏览 · 2022-06-21 19:17:25

Orangefishs_ · 2022-06-21 19:17:25 发布

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

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

一、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>