Vue学习：vue生命周期

矫情吗；* 2023-10-04 19:46 84阅读 0赞

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。生命周期又称为生命周期回调函数，生命周期函数，生命周期钩子。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

![920e5c2884c9490095c2968cb74f88b8.png][]

![99fbe226e4a34825a6ce51be14e6f567.png][]

测试页面:

<!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>

#### 3.1. beforeCreate ####

> 在组件实例初始化完成之后立即调用。
> 
> 会在实例初始化完成、props 解析之后、`data()` 和 `computed` 等选项处理之前立即调用。也就是在这个生命周期中,我们无法获取到data的数据,methods的函数,以及挂载的dom元素
> 
> ![da75b49a84cd44e68b112ff0ff1f875b.png][]
> 
>     beforeCreate() {
>      console.log(this.name);
>      console.log(">>>>>beforeCreate>>>>>");
>     }

#### 3.2 created ####

> 在组件实例处理完所有与状态相关的选项后调用。
> 
> 当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 `$el` 属性仍不可用。
> 
>     created(){
>     console.log(this.name);
>     console.log(">>>>>create>>>>>");
>     }
> 
> ![cd2aabbfbf364f6689e44256e9b49c7b.png][]
> 
> 我们可以在这个created生命周期,通过发送ajax请求,请求后台数据,进行数据的初始化

#### 3.3 beforeMount ####

> 在组件被挂载之前调用。
> 
> 当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
> 
> > **注意:**
> > 
> > 1.  页面呈现的是未经过Vue编译的DOM结构
> > 2.  所有对DOM的操作,最终都不凑效
> > 3.  获取不到真实DOM元素
> 
>     beforeMount() {
>     console.log( document.querySelector("h1"));
>     console.log(">>>>beforeMount>>>>");
>     }
> 
> ![199af3ac93b74253a1eaacdccc51a101.png][]

#### 3.4 mounted ####

> 在组件被挂载之后调用。
> 
> 组件在以下情况下被视为已挂载：
> 
>  *  所有同步子组件都已经被挂载。(不包含异步组件或 `<Suspense>` 树内的组件)
>  *  其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。
> 
> 这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在[服务端渲染应用][Link 1]中用于确保 DOM 相关代码仅在客户端被调用。
> 
> > **注意:**
> > 
> > 1.  页面中呈现的是经过vue编译的DOM(真实DOM)
> > 2.  可以获取到真实DOM元素
> > 3.  对DOM的操作均有效(尽可能避免).至此初始化过程结束,一般在此进行,开启定时器,发送网络请求,订阅消息,绑定自定义事件等初始化操作
> 
>     mounted() {
>     console.log( document.querySelector("h1"));
>     console.log(">>>>mounted>>>>>");
>     }
> 
> ![d5840dc9e59948848df06411ebe3f140.png][]

#### 3.5 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>
> 
> ![04ab51e0275941cab195bd52f6d10121.png][]

#### 3.6 updated ####

> 在组件因为一个响应式状态变更而更新其 DOM 树之后调用。
> 
> > **注意:**
> > 
> > 此时数据是新的,但页面是新的
> 
>     updated() {
>     console.log("页面name值:",document.querySelector("h1").innerText);
>     console.log("data中name值:",this.name);
>     console.log(">>>>updated>>>");
>     },
> 
> ![edd1f2b86563406a8669f26cbaf4d845.png][]

#### 3.7 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>
> 
> ![30f5dfe900ff453fb1f088be9171ce10.png][]

#### 3.8 unmounted ####

> 在一个组件实例被卸载之后调用。
> 
> 一个组件在以下情况下被视为已卸载：
> 
>  *  其所有子组件都已经被卸载。
>  *  所有相关的响应式作用 (渲染作用以及 `setup()` 时创建的计算属性和侦听器) 都已经停止。
> 
>     unmounted() {
>     	console.log(">>>>>unmounted>>>>>");
>     }

[920e5c2884c9490095c2968cb74f88b8.png]: https://img-blog.csdnimg.cn/920e5c2884c9490095c2968cb74f88b8.png
[99fbe226e4a34825a6ce51be14e6f567.png]: https://img-blog.csdnimg.cn/99fbe226e4a34825a6ce51be14e6f567.png
[da75b49a84cd44e68b112ff0ff1f875b.png]: https://img-blog.csdnimg.cn/da75b49a84cd44e68b112ff0ff1f875b.png
[cd2aabbfbf364f6689e44256e9b49c7b.png]: https://img-blog.csdnimg.cn/cd2aabbfbf364f6689e44256e9b49c7b.png
[199af3ac93b74253a1eaacdccc51a101.png]: https://img-blog.csdnimg.cn/199af3ac93b74253a1eaacdccc51a101.png
[Link 1]: https://cn.vuejs.org/guide/scaling-up/ssr.html
[d5840dc9e59948848df06411ebe3f140.png]: https://img-blog.csdnimg.cn/d5840dc9e59948848df06411ebe3f140.png
[04ab51e0275941cab195bd52f6d10121.png]: https://img-blog.csdnimg.cn/04ab51e0275941cab195bd52f6d10121.png
[edd1f2b86563406a8669f26cbaf4d845.png]: https://img-blog.csdnimg.cn/edd1f2b86563406a8669f26cbaf4d845.png
[30f5dfe900ff453fb1f088be9171ce10.png]: https://img-blog.csdnimg.cn/30f5dfe900ff453fb1f088be9171ce10.png