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

Vue3.0生命周期钩子（包含：Vue 2.0 和 Vue 3.0）

news 2025/12/19 3:30:20

1、Vue 2.0 生命周期钩子

每个应用程序实例在创建时都有一系列的初始化步骤。例如，创建数据绑定、编译模板、将实例挂载到 DOM 并在数据变化时触发 DOM 更新、销毁实例等。在这个过程中会运行一些叫做生命周期钩子的函数，通过这些钩子函数可以定义业务逻辑。应用程序实例中几个主要的生命周期钩子函数的说明如下：

钩子函数说明
beforeCreate()在实例初始化之后且数据观测和事件/监听器配置之前调用。
created()在实例创建之后进行调用，此时尚未开始 DOM 编译。在需要初始化处理一些数据时会比较有用。
beforeMount()在挂载开始之前进行调用，此时 DOM 还无法操作。
mounted()在 DOM 文档渲染完毕之后进行调用。相当于 JavaScript 中的 windos.onload() 方法。
beforeUpdate()在数据更新时进行调用，适合在更新之前访问现在的 DOM，如手动移除已添加的事件监听器。
updated()在数据更新导致的虚拟 DOM 被重新渲染时进行调用。
beforeDestroy()在销毁实例之前进行调用，此时实例仍然有效。此时可以解绑一些使用 addEventListener 监听的事件等。
destroyed()在实例被销毁之后进行调用。

【实例】使用生命周期钩子，了解 Vue.js 内部的运行机制。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue生命周期钩子</title>
</head><body><div id="app"><p>{{text}}</p></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">//创建应用程序实例const vueApp = Vue.createApp({//返回数据对象data() {return {text: "千里之行，始于足下"}},//生命周期钩子beforeCreate: function () {console.log("beforCreate");},created: function () {console.log("created");},beforeMount: function () {console.log("beforeMount");},mounted: function () {console.log("mounted");},beforeUpdate: function () {console.log("beforeUpdate");},updated: function () {console.log("updated");}//转载应用程序实例的根组件}).mount("#app");//使用定时器函数，2秒后修改内容setTimeout(function () {console.log("修改数据内容：")vueApp.text = "水不在深，有龙则灵";}, 2000);
</script></html>

执行结果：

当2秒后调用 setTimeout() 方法，修改 text 的内容，触发 beforeUpdate() 和 updated() 钩子函数。

2、Vue 3.0 生命周期钩子

Vue3.0 是兼容 Vue2.x 版本的也就是说我们再日常工作中可以在 Vue3 中使用 Vue2.x 的相关语法。

Vue 3.0 带来了许多新特性和改进，其中包括更强大的组合 API。与基于选项的 API 相比，组合 API 中的生命周期钩子函数也发生了变化，将选项中的生命周期钩子函数改成了 onXxx() 函数的形式。

需要注意：

1、beforeCreate() 和 created() 两个钩子函数已被删除了，取而代之的是 setup() 函数。

2、组合 API 中的生命周期钩子函数都是在 setup() 函数内部通过引入相应的函数来使用的。

Vue 3.0 中新增的钩子函数主要包括：

组合 API 钩子函数说明
setup()

setup() 函数是一个新的组件选项，它是组件内部使用组合 API 的入口。

setup() 函数在组件实例创建之前、初始化 Prop 之后调用。

setup() 函数可以返回一个对象或函数，对象的属性会合并到组件模板渲染的上下文中。

onBeforeMount()组件挂载到节点上之前执行的函数。
onMounted()组件挂载完成后执行的函数。
onBeforeUpdate()组件更新之前执行的函数。
onUpdated()组件更新完成之后执行的函数。
onBeforeUnmount()组件卸载之前执行的函数
onUnmounted()组件卸载完成后执行的函数。
onActivated()被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行。
onDeactivated()比如从 A 组件，切换到 B 组件，A 组件消失时执行。
onErrorCaptured()当捕获一个来自子孙组件的异常时激活钩子函数。

Vue2.0 和 Vue3.0 生命周期钩子函数对比：

【实例】创建一个组件，实现一个计数器功能。

<template><div><h3>{{ blogInfo.name }}</h3><h3>{{ blogInfo.url }}</h3><p>计数结果：{{ count }}</p><button @click="counter">计数器</button></div>
</template><script>
import { ref, reactive, onMounted, onUnmounted } from 'vue';export default {setup() {// 使用 ref 创建响应式的基本类型const count = ref(0);// 使用 reactive 创建响应式的复杂类型const blogInfo = reactive({name: '您好，欢迎访问 pan_junbiao的博客',url: 'https://blog.csdn.net/pan_junbiao'});// 挂载时的操作onMounted(() => {console.log('组件已挂载');});// 卸载时的操作onUnmounted(() => {console.log('组件已卸载');});// 增加计数的方法function counter() {count.value++;}// 返回需要在模板中使用的数据和方法return {blogInfo,count,counter};}
};
</script>

 执行结果：

相关文章：

Vue3.0生命周期钩子（包含：Vue 2.0 和 Vue 3.0）

1、Vue 2.0 生命周期钩子 每个应用程序实例在创建时都有一系列的初始化步骤。例如&#xff0c;创建数据绑定、编译模板、将实例挂载到 DOM 并在数据变化时触发 DOM 更新、销毁实例等。在这个过程中会运行一些叫做生命周期钩子的函数&#xff0c;通过这些钩子函数可以定义业务逻…...

编程日记 2024/8/20 1:43:37

遥感之常用各种指数总结大全

目前在遥感领域基本各种研究领域都会用到各种各样的指数&#xff0c;如水体指数&#xff0c;植被指数&#xff0c;农业长势指数&#xff0c;盐分指数&#xff0c;云指数&#xff0c;阴影指数&#xff0c;建筑物指数&#xff0c;水质指数&#xff0c;干旱指数等等众多。 本文对上…...

编程日记 2024/8/20 1:40:34

【C++】C++11新增特性

目录 C11简介&#xff1a; 1、统一的列表初始化&#xff1a; std::initializer_list 2、自动类型推导&#xff1a; auto&#xff1a; decltype&#xff1a; 3、final 和 override final&#xff1a; override&#xff1a; 4、默认成员函数控制&#xff1a; 显示缺省…...

编程日记 2024/8/20 1:39:33

【LeetCode每日一题】——662.二叉树最大宽度

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 广度优先搜索 二【题目难度】 中等 三【题目编号】 662.二叉树最大宽度 四【题目描述】 给…...

编程日记 2024/8/20 1:38:32

第二十三节、血量更新逻辑的实现

一、创建代码 引入命名空间 using UnityEngine.UI; 调用UI必须有这个代码 二、ScriptObject类 1、是一个持久化存储文件的类型 接收所有的事件方法 先继承SO类&#xff0c;然后创建项目菜单 2、进行订阅 放入事件类&#xff0c;关联代码&#xff0c;即可进行广播 传递给这…...

编程日记 2024/8/20 1:37:31

Spring Authorization Server 认证服务器搭建

Spring Authorization Server实现了oauth2和oidc，最近有了解相关技术的需求，所以就尝试着进行了基本的环境搭建和技术测试，目前只测试了授权码模式，做一个记录，后续需要用时方便查找和参考。 1. 版本要求 Spring Authorization Server 版本：1.3.1 JDK 版本：17 Spring B…...

编程日记 2024/8/20 1:32:27

秋招突击——8/15——知识补充——垃圾回收机制

文章目录 引言正文指针引用可达性分析算法垃圾回收算法标记清除算法标记整理算法复制分代收集 垃圾收集器Serial收集器ParNew并行收集器Parallel Scavenge吞吐量优先收集器Serial Old老年代收集器Parallel old收集器CMS收集器G1收集器&#xff08;Garbage First垃圾优先&#x…...

编程日记 2024/8/20 1:29:21

【iOS】UITableViewCell的重用问题解决方法

我自己在实验中对cell的重用总结如下&#xff1a; 非自定义Cell和非自定义cell的复用情况一样&#xff1a; 第一次加载创建tableView的时候&#xff0c;是屏幕上最多也显示几行cell就先创建几个cell&#xff0c;此时复用池里什么都没有开始下滑tableView&#xff0c;刚开始滑…...

编程日记 2024/8/20 1:28:20

开发一个微信小程序商城需要哪些技术栈

开发一个小程序商城需要掌握以下技术栈&#xff1a;‌ 前端技术&#xff1a;‌包括HTML、‌CSS和JavaScript&#xff0c;‌用于定义商城的页面结构、‌样式设计和交互功能。‌ 微信小程序专用技术&#xff1a;‌如WXML、‌WXSS、‌JavaScript和JSON&#xff0c;‌用于描述小程…...

编程日记 2024/8/20 1:24:15

望繁信科技荣膺上海市浦东新区博士后创新实践基地称号

近日&#xff0c;上海望繁信科技有限公司&#xff08;简称“望繁信科技”&#xff09;凭借在大数据流程智能领域的卓越表现&#xff0c;成功入选上海市浦东新区博士后创新实践基地。这一荣誉不仅是对望繁信科技创新能力和技术实力的高度认可&#xff0c;也标志着公司在推动产学…...

编程日记 2024/8/20 1:21:12

Nginx--代理与负载均衡（扩展nginx配置7层协议及4层协议方法、会话保持）

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 一、代理原理 1、反向代理产生的背景 单个服务器的处理客户端&#xff08;用户&#xff09;请求能力有一个极限&#xff0c;当接入请求过多时&#…...

编程日记 2024/8/20 1:19:10

Ubuntu20.4 系统安装后无wifi图标

0. 问题排查 1.检查 BIOS 设置: 有时候&#xff0c;无线网卡可能在 BIOS 中被禁用。重启电脑&#xff0c;进入 BIOS 设置&#xff0c;确保无线网卡选项是启用的。 2.检查硬件开关: 检查您的笔记本电脑是否有物理开关或键盘快捷键来启用或禁用无线网卡。 3.在软件更新中切换…...

编程日记 2024/8/20 1:17:06

牛客网SQL进阶135 ：每个6/7级用户活跃情况

每个67级用户活跃情况_牛客题霸_牛客网 0 问题描述 基于用户信息表user_info、、试卷作答记录表exam_record、题目练习记录表practice_record&#xff0c;统计 每个6/7级用户总活跃月份数、2021年活跃天数、2021年试卷作答活跃天数、2021年答题活跃天数&#xff0c;结果 按照总…...

编程日记 2024/8/20 1:16:05

SQLite3使用接口写入二进制文件

使用接口的方式写入二进制文件 &#xff0c;有二种方案。 一、全部文件 一次性写下到数据中 使用sqlite3_bind_blob接口 FILE* fpfopen("user.bmp","rb"); iLenfread(buffer,1,65535,fp); fclose(fp);sqlite3_prepare(pDB,"insert into user values …...

编程日记 2024/8/20 1:14:55

在复杂的数据库架构中，如何优化 SQL 查询以提高性能和减少资源消耗？

在优化 SQL 查询以提高性能和减少资源消耗时&#xff0c;可以考虑以下几个方面&#xff1a; 使用索引&#xff1a;为经常被查询的列创建索引&#xff0c;可以大大加快查询速度。同时&#xff0c;避免过多的索引&#xff0c;因为过多的索引会增加写入操作的开销。 编写高效的查…...

编程日记 2024/8/20 1:12:53

【HarmonyOS】端云一体化初始化项目

简介 端云一体化开发是HarmonyOS对云端开发的支持、实现端云联动。云开发服务提供了云函数、云数据库、云存储等服务&#xff0c;可以使开发者专注于应用的业务逻辑开发&#xff0c;无需关注基础设施&#xff0c;例如&#xff1a;服务器、操作系统等问题。 因此&#xff0c;…...

编程日记 2024/8/20 1:11:52

LLM之KG：利用大语言模型(LLM)对文本语料提取概念和概念之间的语义关系进而实现自动构建知识图谱

LLM之KG：利用大语言模型(LLM)对文本语料提取概念和概念之间的语义关系进而实现自动构建知识图谱 目录 ML之KG：基于MovieLens电影评分数据集利用基于知识图谱的推荐算法(networkx+基于路径相似度的方法)实现对用户进行Top电影推荐案例 LLMs之AutoKG：《大型语言模型在知识图…...

编程日记 2024/8/20 1:09:50

Spring Security 6如何使用？

Spring Security 6 是一个功能强大且高度可定制的身份验证和访问控制框架&#xff0c;它专注于为基于Java的应用程序提供全面的安全解决方案。以下是对Spring Security 6的详细解析&#xff1a; 一、核心功能 身份验证&#xff08;Authentication&#xff09;&#xff1a; 验…...

编程日记 2024/8/20 1:06:46

PyTorch深度学习快速入门教程--学习笔记

目录 P4 PyCharm和Jupyter的对比 P5 PyTorch加载数据 P6 Dataset类代码实现 P7 Tensorboard 写日志 读取日志文件 Tensorboard 读图片 P10 Transforms使用 Transforms用途 常见的Transforms工具 P14 torchvision数据集使用 P15 Dataloader使用 P16 nn.Module模块使…...

编程日记 2024/8/20 1:05:45

SQLALchemy 分组过滤、子查询

SQLALchemy 分组过滤、子查询 分组和过滤（Group By Having）示例：使用ORM示例：使用SQLAlchemy Core子查询（Subquery）SQLAlchemy 是一个流行的 SQL 工具包和对象关系映射（ORM）库，用于 Python 应用程序。它允许你以 Pythonic 的方式使用 SQL 数据库，同时提供了强大的查询…...

编程日记 2024/8/20 1:04:44

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2025/12/15 8:43:18

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/11/22 7:38:58

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2025/10/17 0:18:22

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/25 5:16:24

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/12/13 4:04:33

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2025/12/14 6:17:45

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2025/12/14 3:26:26

Python 高效图像帧提取与视频编码：实战指南

Python 高效图像帧提取与视频编码：实战指南 在音视频处理领域，图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库（如 OpenCV、FFmpeg、PyAV），可以高效处理视频流，实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程，提高处理…...

编程新知 2025/8/31 18:02:53

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

编程新知 2025/12/11 23:26:07