1 生命周期简介
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。在此过程中,它也会运行被称为
生命周期钩子的函数
,让开发者有机会在特定阶段运行自己的代码!
-
周期图解:
1、setup() : 开始创建组件,在 beforeCreate 和 created 之前执行,创建的是 data 和 method
2、onBeforeMount() : 组件挂载到节点上之前执行的函数;
3、onMounted() : 组件挂载完成后执行的函数;
4、onBeforeUpdate(): 组件更新之前执行的函数;
5、onUpdated(): 组件更新完成之后执行的函数;
6、onBeforeUnmount(): 组件卸载之前执行的函数;
7、onUnmounted(): 组件卸载完成后执行的函数;
8、onActivated(): 被包含在 <keep-alive> 中的组件,会多出两个生命周期钩子函数,被激活时执行;
9、onDeactivated(): 比如从 A 组件,切换到 B 组件,A 组件消失时执行;
10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数
全部的生命周期函数
生命周期函数 | 执行时机 | 所属阶段 | 执行次数 | 应用场景 |
---|---|---|---|---|
beforeCreate | 在内存中开始创建组件之前 | 创建阶段 | 唯一一次 | - |
created | 在内存中创建组件完毕后 | 创建阶段 | 唯一一次 | 发送ajax请求 |
beforeMounted | 在把组件初次渲染到页面之前 | 创建阶段 | 唯一一次 | |
mounted | 组件初次渲染到页面之后 | 创建阶段 | 唯一一次 | 操作DOM |
beforeUpdate | 在组件被重新渲染之前 | 运行阶段 | 0次或多次 | |
updated | 在组件被重新渲染之后 | 运行阶段 | 0次或多次 | |
beforeUnmount | 在组件被销毁之前 | 销毁阶段 | 唯一一次 | |
unmounted | 在组件被销毁之后(页面和内存) | 销毁阶段 | 唯一一次 |
注意:在实际开发中,created是最常用的生命周期函数
测试页面:
<!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>Document</title>
<style type="text/css">
</style>
<script src="./js/vue.global.js"></script>
</head>
<body>
<div id="box">
<h1>{{name}}</h1>
</div>
<script type="text/javascript" >
const {createApp} = Vue
var app = createApp({
data(){
return {
name:'zhangsan',
}
},
}).mount("#box");
</script>
</body>
</html>
2. beforeCreate
在组件实例初始化完成之后立即调用。
会在实例初始化完成、props 解析之后、
data()
和computed
等选项处理之前立即调用。也就是在这个生命周期中,我们无法获取到data的数据,methods的函数,以及挂载的dom元素
3.created
在组件实例处理完所有与状态相关的选项后调用。
当这个钩子被调用时,以下内容已经设置完成:响应式数据、计算属性、方法和侦听器。然而,此时挂载阶段还未开始,因此
$el
属性仍不可用。created(){ console.log(this.name); console.log(">>>>>create>>>>>"); }
我们可以在这个created生命周期,通过发送ajax请求,请求后台数据,进行数据的初始化
4.beforeMount
在组件被挂载之前调用。
当这个钩子被调用时,组件已经完成了其响应式状态的设置,但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
注意:
页面呈现的是未经过Vue编译的DOM结构
所有对DOM的操作,最终都不凑效
获取不到真实DOM元素
5.mounted
在组件被挂载之后调用。
组件在以下情况下被视为已挂载:
所有同步子组件都已经被挂载。(不包含异步组件或
<Suspense>
树内的组件)其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时,才可以保证组件 DOM 树也在文档中。
这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用,或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。
注意:
页面中呈现的是经过vue编译的DOM(真实DOM)
可以获取到真实DOM元素
对DOM的操作均有效(尽可能避免).至此初始化过程结束,一般在此进行,开启定时器,发送网络请求,订阅消息,绑定自定义事件等初始化操作
mounted() { console.log( document.querySelector("h1")); console.log(">>>>mounted>>>>>"); }
6.beforeUpdate
在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。
注意:
此时数据是新的,但页面是旧的
<!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>Document</title> <style type="text/css"> </style> <script src="./js/vue.global.js"></script> </head> <body> <div id="box"> <h1>{{name}}</h1> <button @click="changeName()">修改</button> </div> <script type="text/javascript" > const {createApp} = Vue var app = createApp({ data(){ return { name:'zhangsan', } }, methods:{ changeName(){ this.name="lisi"; } }, beforeUpdate() { console.log("页面name值:",document.querySelector("h1").innerText); console.log("data中name值:",this.name); console.log(">>>>beforeUpdate>>>"); }, }).mount("#box"); </script> </body> </html>
7.updated
在组件因为一个响应式状态变更而更新其 DOM 树之后调用。
注意:
此时数据是新的,但页面是新的
updated() { console.log("页面name值:",document.querySelector("h1").innerText); console.log("data中name值:",this.name); console.log(">>>>updated>>>"); },
8.beforeUnmount
在一个组件实例被卸载之前调用。当这个钩子被调用时,组件实例依然还保有全部的功能。
注意:
此时,app实例中所有的data,methods,指令等等,都处于可用状态,马上要执行销毁过程,一般在此阶段,关闭定时器,取消订阅消息,解绑自定义事件等收尾操作
<!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>Document</title> <style type="text/css"> </style> <script src="./js/vue.global.js"></script> </head> <body> <div id="box"> <h1>{{name}}</h1> <button @click="changeName()">修改</button> <hello v-if="isShow"></hello> <button @click="destroy">点我销毁</button> </div> <script type="text/javascript" > const {createApp} = Vue //自定义一个hello组件 const hello = { data(){ return { hello:'你好' } }, template:`<h2>{{hello}}</h2>`, beforeUnmount() { console.log(this.hello); console.log(">>>>>beforeUnmount>>>>>"); }, } var app = createApp({ components:{ //注册组件 hello:hello, }, data(){ return { name:'zhangsan', isShow:true, } }, methods:{ changeName(){ this.name="lisi"; }, destroy(){ console.log("hello组件销毁中..."); this.isShow = false; } }, }).mount("#box"); </script> </body> </html>
9.unmounted
在一个组件实例被卸载之后调用。
一个组件在以下情况下被视为已卸载:
其所有子组件都已经被卸载。
所有相关的响应式作用 (渲染作用以及
setup()
时创建的计算属性和侦听器) 都已经停止。unmounted() { console.log(">>>>>unmounted>>>>>"); }