Vue3生命周期 - 技术栈

文章目录

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

前言

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

钩子函数

提示：VUE3生命周期：

1、创建初始化

实例创建之前：beforeCreate
实例创建完毕：created

2、DOM挂载

DOM挂载之前：beforeMount
DOM挂载完毕：mounted

3、数据更新

数据更新之前：beforeUpdate
数据更新完毕：updated

4、结束 DOM 卸载

结束 DOM 卸载之前：beforeUnmount
结束 DOM 卸载完毕：unmounted

每一个阶段都有两个钩子函数，每一个钩子函数都是一个配置项

最常用的是：mounted 函数

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

代码展示1

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

提示：以下是本篇文章正文内容，下面案例可供参考

下面代码展示了Vue.js框架中，不同生命周期钩子函数的基本功能和使用方法，以及如何在不同的阶段执行相应的操作。

javascript 复制代码

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