Vue3生命周期

文章目录

• 前言
• 钩子函数
• 代码展示1
• 代码展示2

---

前言

组件从创建到销毁的整个过程就是生命周期

钩子函数

提示：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 函数

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

代码展示1

使用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）

上面的代码是一个使用Vue.js实现生命周期演示页面的示例。

其中包括了Vue.js提供的生命周期钩子函数，分别是：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。

这些钩子函数会在不同的阶段被调用，用于对应阶段的操作。

在页面中，定义了一个id为"app"的div容器，其中包含了一个标题和一个通过v-for指令遍历businesslist数组的p标签。

在Vue实例中，定义了两个数据属性：name 和 gamelist（模拟猫和老鼠游戏为例），以及一个方法f1。对应的生命周期钩子函数中分别输出了相应的信息，以便在控制台中查看功能实现的过程。

代码展示2

引入

创建：setup

挂载：onBeforeMount、onMounted

更新：onBeforUpdate、onUpdated 、

卸载：onBeforeUnmount、onUnmounted