Vue生命周期

最新推荐文章于 2025-04-08 16:48:53 发布

恰似枫扬

最新推荐文章于 2025-04-08 16:48:53 发布

阅读量1.1k

点赞数 16

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_52495299/article/details/140428391

版权

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>>>>>");
}