8 创建、渲染、更新、销毁八个生命周期函数

r囧r小猫 2023-10-06 20:21 25阅读 0赞

#### Vue的生命周期函数（第二篇） ####

*  场景
 *  beforeUpdate 和 updated 生命周期函数
 *  beforUnmount和unmounted生命周期函数
 *  Vue3中八个生命周期函数

## 场景 ##

我们接着上篇文章继续学习，上篇文章只讲了Vue3中的前四个生命周期，先来简单的回顾一下。

beforeCreate()：在实例生成之前会自动执行的函数

created(): 在实例生成之后会自动执行的函数

beforeMount(): 在模板渲染完成之前执行的函数

mounted(): 在模板渲染完成之后执行的函数

## beforeUpdate 和 updated 生命周期函数 ##

**这两个生命周期函数在Vue中的data数据发生变化时，才会被执行，一个是在变化之前，一个是在变化之后。**

我们先来看beforeUpdate函数，也就是在数据变化之前。

为了能展示这个效果，我们写一个数据变化的功能，每次点击文字都进行改变。

在上篇文章编写的 `handleItemClick` 方法中，改变 `message` 的值。这里使用了三元运算符，代码如下：

handleItemClick() {
        
        this.message = this.message == 'mybj123.com' ? "willem笔记" : "mybj123.com"
    }

有了这个方法之后，再来编写 `beforeUpdate` 方法。  
代码如下：

beforeUpdate：当data中的数据变化时， 会立即自动执行的函数

beforeUpdate() {
        
        console.log('beforeUpdate')
    },

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo7</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app = Vue.createApp({
        
            data() {
        
                return {
        
                    message: 'mybj123.com'
                }
            },
            methods: {
        
                handleItemClick() {
        
                    this.message = this.message == 'mybj123.com' ? "willem笔记" : "mybj123.com"
                }
             },
             beforeUpdate() {
        
                console.log('beforeUpdate')
             },
             template: "<h2 v-on:click='handleItemClick'>{
        {message}}</h2>"
        })
        const vm = app.mount("#app")
    </script>
    </html>

在浏览器中你是可以看出先后顺序的。  
这个不太直观，如何用代码的方式看出beforeUpdate和updated区别？  
我们可以通过下面这种方法。

beforeUpdate() {
        
        console.log('beforeUpdate')
        console.log(document.getElementById('app').innerHTML)
    },
    updated() {
        
        console.log('updated')
        console.log(document.getElementById('app').innerHTML)
    },

通过这种形式，就可以清楚的看出，在beforeUpdate时，DOM的内容并没有渲染更新，而到了updated中DOM的内容已经进行了更新。

这就是两个生命周期函数的区别。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]

## beforUnmount和unmounted生命周期函数 ##

这两个生命周期函数是在Vue销毁时自动执行的函数，  
一个是销毁前执行，  
一个是销毁后执行。

beforeUnmount(): 当Vue应用失效时，会自动执行的函数。

unmounted(): 当Vue应用失效时，且DOM完全销毁之后，会自动执行。

我们可以先把这两个生命周期函数写在页面上，代码如下：

beforeUnmount() {
        
        console.log('beforeUnmount')
    },
    unmounted() {
        
        console.log('unmounted')
    },

那如何能看到这个效果那？  
这个需要在浏览器的控制台中输入销毁代码。

app.unmount()

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo7</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app = Vue.createApp({
        
            data() {
        
                return {
        
                    message: 'mybj123.com'
                }
            },
            methods: {
        
                handleItemClick() {
        
                    this.message = this.message == 'mybj123.com' ? "willem笔记" : "mybj123.com"
                }
             },
             beforeUnmount() {
        
                console.log('beforeUnmount')
             },
             unmounted() {
        
                console.log('unmounted')
             },
             template: "<h2 v-on:click='handleItemClick'>{
        {message}}</h2>"
        })
        const vm = app.mount("#app")
        app.unmount()
    </script>
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]

这时候就会打印出这两个对应的生命周期函数了。  
当然你这时候如果编写程序看出页面变化，也可以通过打印innerHTML方式。来看出效果。

beforeUnmount() {
        
        console.log('beforeUnmount')
        console.log(document.getElementById('app').innerHTML)
    },
    unmounted() {
        
        console.log('unmounted')
        console.log(document.getElementById('app').innerHTML)
    },

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
这时候在浏览器执行app.unmount(),会看到，在beforeUnmount方法中还是有DOM内容的，然后到了unmounted方法中，就已经没有任何的DOM内容了。

## Vue3中八个生命周期函数 ##

beforeCreate() ：在实例生成之前会自动执行的函数

created() : 在实例生成之后会自动执行的函数

beforeMount() ：在模板渲染完成之前执行的函数

mounted() ：在模板渲染完成之后执行的函数

beforeUpdate ：当data中的数据变化时， 会立即自动执行的函数

updated：当data中的数据发生变化，页面重新渲染完后，会自动执行的函数

beforeUnmount()：当Vue应用失效时，会自动执行的函数

unmounted()：当Vue应用失效时，且DOM完全销毁之后，会自动执行

--------------------

这些生命周期虽然多，你可以成对的去记忆，这样就有四个关键节点了：

**创建、渲染、更新、销毁**

最主要的理解是他们是自动执行的函数。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/51a305c489af4569ad834b6da87a30e1.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/f02dccbda384467290d3dfd2168c779e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/4ff42cbc6e584a58a8d4b95a7b4ac1e7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/432e5ab923c442f9aac7c6ab246004e3.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16