Vue3生命周期

古城微笑少年丶 2023-10-13 08:52 38阅读 0赞

### 文章目录 ###

*  前言
 *  钩子函数
 *  代码展示

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

# 前言 #

组件从创建到销毁的整个过程就是生命周期  
![请添加图片描述][cb88a8f2e3a94e48b78b4ddf88e5d640.png]

# 钩子函数 #

`提示：VUE3生命周期：`

1、创建初始化

1.  实例创建之前：beforeCreate
2.  实例创建完毕：created

2、DOM挂载

1.  DOM挂载之前：beforeMount
2.  DOM挂载完毕：mounted

3、数据更新

1.  数据更新之前：beforeUpdate
2.  数据更新完毕：updated

4、结束 DOM 挂载

1.  结束 DOM 挂载之前：beforeUnmount
2.  结束 DOM 挂载完毕：unmounted

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

每一个阶段都有两个钩子函数，每一个钩子函数都是一个配置项  
最常用的是：mounted 函数

实际应用中，在挂载完成钩子函数中，要发送请求给后端程序，获取后端返回的真实数据

# 代码展示 #

使用Vue.js实现生命周期演示页面

`提示：以下是本篇文章正文内容，下面案例可供参考`  
下面代码展示了Vue.js框架中，不同生命周期钩子函数的基本功能和使用方法，以及如何在不同的阶段执行相应的操作。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <h1>创建初始化  挂载  更新  结束挂载----（vue生命周期）</h1>
            <h1 @click="f1">{
        {
        name}}</h1>
            <p v-for="(item, index) in businesslist">{
        {
        item}}</p>
        </div>
    </body>
    <script src="../js/vue3.js"></script>
    <script>
        let vm = Vue.createApp({
        
            data() {
        
                return {
        
                    name: '猫抓',
                    gamelist: []
                }
            },
            methods: {
        
                f1(){
        
                    this.name = this.name+'老鼠'
                }
            },
            beforeCreate() {
        
                console.log('创建初始化之前');
            },
            created() {
        
                console.log('创建初始化完成');
            },
            beforeMount() {
        
                console.log('挂载之前');
            },
            mounted() {
        
                console.log('挂载完成');
                // 实际应用中，在挂载完成钩子函数中，要发送请求给后端程序，获取后端返回的真实数据
                this.gamelist.push('汤姆')
                this.gamelist.push('杰瑞')
                this.gamelist.push('斯派克')
            },
            beforeUpdate() {
        
                console.log('更新之前');
            },
            updated() {
        
                console.log('更新结束');
            },
            beforeUnmount() {
        
                console.log('结束挂载之前');
            },
            unmounted() {
        
                console.log('结束挂载完成');
            },
        })
    
        vm.mount('#app')
    </script>
    </html>

输出效果：

在控制台输入`vm . unmount()`结束（实例名字叫vm）  
![请添加图片描述][355cf3c9a3c348fbb2837bd8fc5128dc.gif]

上面的代码是一个使用Vue.js实现生命周期演示页面的示例。  
其中包括了Vue.js提供的生命周期钩子函数，分别是：`beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeUnmount`、`unmounted`。  
这些钩子函数会在不同的阶段被调用，用于对应阶段的操作。

在页面中，定义了一个id为"app"的div容器，其中包含了一个标题和一个通过v-for指令遍历businesslist数组的p标签。  
在Vue实例中，定义了两个数据属性：name 和 gamelist（模拟猫和老鼠游戏为例），以及一个方法f1。对应的生命周期钩子函数中分别输出了相应的信息，以便在控制台中查看功能实现的过程。

[cb88a8f2e3a94e48b78b4ddf88e5d640.png]: https://img-blog.csdnimg.cn/cb88a8f2e3a94e48b78b4ddf88e5d640.png
[355cf3c9a3c348fbb2837bd8fc5128dc.gif]: https://img-blog.csdnimg.cn/355cf3c9a3c348fbb2837bd8fc5128dc.gif