当前位置：首页 > news >正文

Vue3 生命周期

news 2025/8/10 16:06:34

文章目录

前言
钩子函数
代码展示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框架中，不同生命周期钩子函数的基本功能和使用方法，以及如何在不同的阶段执行相应的操作。

<!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。对应的生命周期钩子函数中分别输出了相应的信息，以便在控制台中查看功能实现的过程。