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

Vue:生命周期钩子

news 来源：原创 2025/7/28 1:26:16

深入理解 Vue 的钩子函数（生命周期函数）

Vue 的钩子函数（生命周期函数）是 Vue 实例在不同阶段自动调用的函数。可以在 Vue 实例的创建、更新、销毁等阶段插入自己的逻辑。

钩子函数的作用

想象一下，Vue 实例的生命周期就像一个人的一生：出生 → 成长 → 衰老 → 死亡。钩子函数就是这些关键阶段的“时间点”。
组件加载时：初始化数据、请求接口数据
DOM 渲染后：操作 DOM 元素
组件销毁前：清除定时器、解绑事件

核心钩子函数详解

创建阶段（Creation）

beforeCreate
触发时机：实例刚被创建，数据观测和事件配置之前。
能做什么：此时无法访问 data 和 methods，通常用于插件初始化。
不能做什么：操作数据或调用方法。
created
触发时机：实例创建完成，数据观测和事件配置已完成。
能做什么：可以访问 data 和 methods，适合发起网络请求、初始化数据。
不能做什么：不要操作 DOM（此时 DOM 还未生成）。

export default {data() {return { message: "Hello" };},created() {console.log(this.message); // 输出 "Hello"this.fetchData(); // 调用方法请求数据},methods: {fetchData() { /* ... */ }}
}

2. 挂载阶段（Mounting）

beforeMount
触发时机：模板编译完成，但尚未将 DOM 渲染到页面。
能做什么：很少使用，一般用于服务端渲染。
mounted
触发时机：DOM 已渲染到页面，可以访问到真实的 DOM 元素。
能做什么：操作 DOM、使用第三方库（如图表库）。
确保子组件的 DOM 也已挂载（使用 this.$nextTick 等待）。

mounted() {this.$nextTick(() => {const element = document.getElementById("my-element");element.style.color = "red"; // 操作 DOM});
}

3. 更新阶段（Updating）

beforeUpdate
触发时机：数据变化后，DOM 更新前。
能做什么：获取更新前的 DOM 状态（比如滚动位置）。
updated
触发时机：数据变化导致的 DOM 更新完成后。
能做什么：执行依赖 DOM 的操作（如重新计算布局）。
注意：避免在此钩子中修改数据，可能导致无限循环！

4. 销毁阶段（Destruction）

beforeDestroy
触发时机：实例销毁前。
能做什么：清理定时器、解绑全局事件、取消未完成的请求。
destroyed
触发时机：实例销毁后。
能做什么：很少使用，用于最后的清理工作。

beforeDestroy() {clearInterval(this.timer); // 清除定时器window.removeEventListener("resize", this.handleResize); // 解绑事件
}

假设一个组件从创建到销毁的完整流程，钩子函数的执行顺序如下：

beforeCreate
created
beforeMount
mounted
beforeUpdate → updated
beforeDestroy
destroyed

<template><div class="lifecycle-demo"><h2>Vue 生命週期鉤子演示</h2><div class="counter"><p>計數器: {{ count }}</p><button @click="increment">增加</button></div><div class="message" v-if="showMessage">{{ message }}</div></div>
</template><script>
export default {name: 'LifecycleDemo',data() {return {count: 0,message: '',showMessage: false}},// 創建實例前beforeCreate() {console.log('beforeCreate: 實例創建前')// 此時 data 和 methods 都還未初始化},// 創建實例後created() {console.log('created: 實例創建後')// 此時可以訪問 data 和 methodsthis.message = '組件已創建'},// 掛載前beforeMount() {console.log('beforeMount: 掛載前')// 此時模板已編譯，但還未渲染到 DOM},// 掛載後mounted() {console.log('mounted: 掛載後')// 此時組件已完全掛載到 DOMthis.showMessage = true},// 更新前beforeUpdate() {console.log('beforeUpdate: 更新前')// 數據更新時觸發，但 DOM 還未更新},// 更新後updated() {console.log('updated: 更新後')// 數據和 DOM 都已更新},// 銷毀前beforeDestroy() {console.log('beforeDestroy: 銷毀前')// 組件銷毀前，此時組件還可以使用},// 銷毀後destroyed() {console.log('destroyed: 銷毀後')// 組件已完全銷毀},methods: {increment() {this.count++}}
}
</script><style scoped>
.lifecycle-demo {max-width: 600px;margin: 20px auto;padding: 20px;border: 1px solid #eee;border-radius: 8px;
}.counter {margin: 20px 0;padding: 15px;background-color: #f5f5f5;border-radius: 4px;
}button {padding: 8px 16px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;
}button:hover {background-color: #45a049;
}.message {margin-top: 10px;padding: 10px;background-color: #e8f5e9;border-radius: 4px;color: #2e7d32;
}
</style>

Vue:生命周期钩子

深入理解 Vue 的钩子函数（生命周期函数） Vue 的钩子函数（生命周期函数）是 Vue 实例在不同阶段自动调用的函数。可以在 Vue 实例的创建、更新、销毁等阶段插入自己的逻辑。钩子函数的作用想象一下，Vue 实例的生命周…...

编程日记 2025/7/28 1:26:16

深入理解设计模式之原型模式（Prototype Pattern）

一、为什么需要原型模式？ 在传统对象创建方式中，我们通过new关键字直接调用构造函数创建实例。但当遇到以下场景时： 对象初始化需要消耗大量资源（如数据库连接）需要创建的对象与现有实例高度相似希望屏蔽对象创建的复…...

编程日记 2025/7/25 6:38:35

K8S cgroups详解

以下是 Kubernetes 中 cgroups（Control Groups） 的详细解析，涵盖其核心原理、在 Kubernetes 中的具体应用及实践操作： 一、cgroups 基础概念 1. 是什么？ cgroups 是 Linux 内核提供的资源隔离与控制机制&#xff0c…...

编程日记 2025/7/26 18:22:29

ARMV8 RK3399 u-boot TPL启动流程分析 --start.S

上电后运行的第一支文件：arch/arm/cpu/armv8/start.S CONFIG_ENABLE_ARM_SOC_BOOT0_HOOK1 #include <asm/arch/boot0.h> 跳转到 arch/arm/include/asm/arch-rockchip/boot0.h CONFIG_SPL_BUILD1 b 1f ROCKCHIP_EARLYRETURN_TO_BROMno TINY_FRAMEWORKno …...

编程日记 2025/7/25 17:34:00

【网络原理】数据链路层

目录一. 以太网二. 以太网数据帧三. MAC地址四. MTU 五. ARP协议六. DNS 一. 以太网以太网是一种基于有线或无线介质的计算机网络技术，定义了物理层和数据链路层的协议，用于在局域网中传输数据帧。二. 以太网数据帧 1）目标地址 …...

编程日记 2025/7/26 23:32:14

保姆级教程|YOLO11改进】【卷积篇】【4】使用RFAConv感受野注意力卷积，重塑空间特征提取，助力高效提点

《------往期经典推荐------》一、AI应用软件开发实战专栏【链接】项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...

编程日记 2025/7/26 5:30:54

虚幻引擎5-Unreal Engine笔记之常用核心类的继承关系

虚幻引擎5-Unreal Engine笔记之常用核心类的继承关系 code review! 文章目录虚幻引擎5-Unreal Engine笔记之常用核心类的继承关系1.UE5中常用核心类的继承关系1.1.简化版1.2.plantuml图1.3.plantuml代码1.4.关于大写字母U和A2.1.组件和类的关系，组件也是类吗&…...

编程日记 2025/7/24 3:24:14

力扣2680题解

记录 2025.5.9 题目： 思路： 1.计算初始或值：首先计算数组中所有元素的按位或结果 allOr，这表示在不进行任何左移操作时数组的或值。 2.计算固定或值：在计算 allOr 的同时，计算一个 fixed 值，…...

编程日记 2025/7/24 4:50:18

搭建基于chrony+OpenSSL（NTS协议）多层级可信时间同步服务

1、时间同步服务的层级概念在绝大多数IT工程师实际工作过程中，针对于局域网的时间同步，遇到最多的场景是根据实际的需求，搭建一个简单的NTP时间同步服务以时间对局域网中的服务器、网络设备、个人电脑等基础设施实现同步授时功能。虽然这样…...

编程日记 2025/7/23 21:23:06

虚拟内存：深入解析与性能优化

文章目录虚拟内存的概念虚拟内存的实现方式虚拟内存的页面置换算法虚拟内存的性能影响结论在现代计算机系统中，虚拟内存（Virtual Memory）是一种至关重要的技术，它极大地提高了系统的多任务处理能力和内存利用率。本文将深入探讨…...

编程日记 2025/7/26 20:42:53

元数据和主数据

元数据和主数据是数据管理中的两个关键概念，其核心区别如下： 1. 定义与本质元数据（Metadata） “关于数据的数据”，用于描述数据的属性、结构、来源、用途等上下文信息。示例：数据库表的字段名称、数据类型…...

编程日记 2025/7/23 4:42:06

JavaScript事件处理全解析：从基础到最佳实践

在现代Web开发中，事件处理是构建交互式应用的核心技术。JavaScript提供了多种事件绑定方式，每种方法都有其适用场景和特点。本文将深入探讨7种主流的事件绑定方法，通过代码示例和原理分析，帮助开发者选择最合适的解决方案。一、…...

编程日记 2025/7/25 7:54:18

高级数据结构：线段树

线段树概述线段树是一种处理区间问题的优越算法，也是算法竞赛的常客。线段树的特点是，类似于一棵二叉树，将一个序列分解成多个区间并储存在二叉树上。例如，把区间 [ 1 , 10 ] [1,10] [1,10]作为树的根节点，然后把…...

编程日记 2025/7/20 15:03:52

精讲C++四大核心特性：内联函数加速原理、auto智能推导、范围for循环与空指针进阶

前引：在C语言长达三十余年的演进历程中，每一次标准更新都在试图平衡性能与抽象、控制与安全之间的微妙关系。从C11引入的"现代C"范式开始，开发者得以在保留底层控制能力的同时，借助语言特性大幅提升代码的可维护性与安全…...

编程日记 2025/7/28 3:41:25

用ffmpeg压缩视频参数建议

注意:代码中的斜杠\可以删除一、基础压缩命令（画质优先) ffmpeg -i input.mp4 \-c:v libx264 -preset slow -crf 23 \ # H.264编码，平衡速度与质量-c:a aac -b:a 128k \ # 音频压缩-vf "scaleif(gt(a,16/9),1920,-2):if(…...

编程日记 2025/7/22 21:37:06

uni-app学习笔记(二)--vue页面代码的构成和新建页面

vue页面的构成一.template 模板区，主要放html布局，注意，如果是开发uni-app，模板区不要放div,h1等标签了，用了在小程序和app端起不到作用。具体应该使用哪些组件，可在uni-app官网上查看：组件-…...

编程日记 2025/7/23 15:19:56

机器语言程序、汇编语言程序、硬件描述语言程序、编译程序、解释程序和链接程序

程序类型定义与核心特征处理对象 / 输入输出结果所属领域典型例子 / 作用机器语言程序由二进制指令（0/1 序列）构成，可被 CPU 直接执行，与硬件架构强绑定。无（直接执行）无（直接运行）低…...

编程日记 2025/7/26 18:08:25

智能语音助手的未来：从交互到融合

摘要随着人工智能技术的不断进步，智能语音助手已经成为我们生活中不可或缺的一部分。从简单的语音指令到复杂的多模态交互，语音助手正在经历一场深刻的变革。本文将探讨智能语音助手的发展历程、当前的技术瓶颈以及未来的发展方向，特别是其在…...

编程日记 2025/7/27 1:29:18

Redis从基础到高阶应用：核心命令解析与延迟队列、事务消息实战设计

Redis基础知识 #切换数据库 bd:0>select 2 "OK" bd:2>dbsize "0" #清空数据库 bd:0>flushdb "OK" #设置值 bd:0>set name "lyt" "OK" #查看所有key bd:0>keys *1) "name" #获取key bd:0>get …...

编程日记 2025/7/24 1:05:31

操作系统原理实验报告

操作系统原理课程的实验报告汇总实验三：线程的创建与撤销实验环境：计算机一台，内装有VC、office等软件实验日期：2024.4.11 实验要求： 1.理解：Windows系统调用的基本概念，进程与线程的基…...

编程日记 2025/7/24 12:07:27

Python爬虫实战：研究nodejs aes加密

1. 引言 1.1 研究背景与意义在当今数字化时代，Web 数据的价值日益凸显。通过爬虫技术获取公开数据并进行分析，能够为企业决策、学术研究等提供有力支持。然而，为了保护数据安全和隐私，许多网站采用了加密技术对数据进行保护，其中 AES 加密是一种常见且安全的加密算法。…...

编程日记 2025/7/27 13:33:24

线程的一些事（2）

在java中，线程的终止，是一种“软性”操作，必须要对应的线程配合，才能把终止落实下去然而，系统原生的api其实还提供了，强制终止线程的操作，无论线程执行到哪，都能强行把这个线程干掉…...

编程日记 2025/7/24 4:29:23

基于 PostgreSQL 的 ABP vNext + ShardingCore 分库分表实战

🚀 基于 PostgreSQL 的 ABP vNext ShardingCore 分库分表实战 📑 目录 🚀 基于 PostgreSQL 的 ABP vNext ShardingCore 分库分表实战✨ 背景介绍🧱 技术选型🛠️ 环境准备✅ Docker Compose（多库 & 读…...

编程日记 2025/7/25 1:08:03

御网杯2025 Web，Msic，密码 WP

Web YWB_Web_xff 审计代码，发现需要$cip2.2.2.1 使用burpsuite抓包，添加X-Forwarded-For:2.2.2.1 然后得到flag YWB_Web_未授权访问更加题目描述知道需要admin登录，但是现在是guest。使用burpsuite抓包发现cookie里面存在user&#xff…...

编程日记 2025/7/22 17:14:10

tensorflow 1.x

简介 TensorFlow：2015年谷歌，支持python、C，底层是C，主要用python。支持CNN、RNN等算法，分CPU TensorFlow/GPU TensorFlow。 TensorBoard：训练中的可视化。快捷键：shiftenter执行命令,Tab键进…...

编程日记 2025/7/27 6:29:05

[ERTS2012] 航天器星载软件形式化模型驱动研发 —— 对 Scade 语言本身的影响

在《从ERTS学习SCADE发展》中提到，在 ERTS 会议中，Scade团队会在该会议中介绍与Scade相关的工作。在 ERTS 2012 中，Scade 团队介绍了使用Scade作为主要工具，应用在航天器星载软件开发中的相关话题。原材料可参考《Formal Model D…...

编程日记 2025/7/23 8:40:23

Spring Boot 集成 Flink CDC 实现 MySQL 到 Kafka 实时同步

Spring Boot 集成 Flink CDC 实现 MySQL 到 Kafka 实时同步 📌 项目背景在大数据实时处理场景中，数据库变更数据的捕获与传输是关键环节。Flink CDC 提供了从 MySQL 等数据库中实时捕获数据变更的能力，并通过 Apache Flink 引擎实现流式处理。本项目使用 Spring Boot …...

编程日记 2025/7/21 5:59:21

软件体系结构（Software Architecture）

文章目录 1. 分层架构（Layered Architecture）核心逻辑代码示例（伪代码）典型场景优缺点 2. 客户端-服务器（Client-Server）核心逻辑典型交互流程应用场景代码示例（RESTful API）优缺点 …...

编程日记 2025/7/24 21:33:15

RS485和RS232 通信配置

RS232 目前硬件上支持RS232的有以下板卡： LubanCat-5IO底板（含有RS232x2） 7.1. 引脚定义具体的引脚定义可以参考背面的丝印 LubanCat-5IO底板引脚定义图 7.2. 跳帽配置 LubanCat-5IO底板鲁班买5IO底板上的RS485和RS232是共用同一组…...

编程日记 2025/7/23 23:45:18

【高数上册笔记篇02】：数列与函数极限

【参考资料】同济大学《高等数学》教材樊顺厚老师B站《高等数学精讲》系列课程 （注：本笔记为个人数学复习资料，旨在通过系统化整理替代厚重教材，便于随时查阅与巩固知识要点） 仅用于个人数学复习，因为课…...

编程日记 2025/7/24 15:05:29

【网络安全】——大端序（Big-Endian）和小端序（Little-Endian）

字节序（Endianness）是计算机系统中多字节数据（如整数、浮点数）在内存中存储或传输时，字节排列顺序的规则。它分为两种类型：大端序（Big-Endian）和小端序&#xf…...

编程日记 2025/7/21 10:39:41

机器学习极简入门：从基础概念到行业应用

有监督学习（supervised learning） 让模型学习的数据包含正确答案（标签）的方法，最终模型可以对无标签的数据进行正确处理和预测，可以分为分类与回归两大类分类问题主要是为了“尽可能分开整个数据而画线”…...

编程日记 2025/7/22 22:30:22

MIT XV6 - 1.5 Lab: Xv6 and Unix utilities - xargs

接上文 MIT XV6 - 1.4 Lab: Xv6 and Unix utilities - find xargs 继续实验，实验介绍和要求如下 (原文链接译文链接) : Write a simple version of the UNIX xargs program for xv6: its arguments describe a command to run, it reads lines from the standard …...

编程日记 2025/7/22 19:36:19

Springboot整合Swagger3

Springboot整合Swagger3、常用注解解释、访问Swagger地址出现404、403、拒绝访问等问题_swagger3注解-CSDN博客...

编程日记 2025/7/24 6:50:28

经典音乐播放器——完美歌词 Poweramp Music Player 3 build

—————【下载地址】——————— 【本章单下载】：https://drive.uc.cn/s/d6c480bc47604 【百款黑科技】：https://ucnygalh6wle.feishu.cn/wiki/HPQywvPc7iLZu1k0ODFcWMt2n0d?fromfrom_copylink —————【下载地址】——————— 本…...

编程日记 2025/7/25 5:19:36

锚定基础与拥抱融合：C 语言在编程教育与技术社区的破圈之路

引言在 Python 占据 TIOBE 指数榜首的 2025 年，C 语言以 23.4% 的稳定份额（2025 年 5 月数据）持续稳居前三，这一现象在编程教育领域尤为显著：全球 92% 的计算机科学本科课程仍将 C 语言作为必修基础课，而…...

编程日记 2025/7/28 1:05:10

深度学习入门：从神经网络基础到前向传播全面解析

深度学习入门：从神经网络基础到前向传播全面解析 🔥 重磅干货！本文是《深度学习基础与核心技术详解》专栏的开篇之作，将系统性地带你走进深度学习的世界！建议收藏+关注，错过可能要找很久哦~ 目录深度学习概述神经网络基础 2.1 生物神经元与人工神经元2.2 感知机模型2.…...

编程日记 2025/7/26 21:55:38

Lambda表达式能用在哪些场景？

Lambda表达式是Java 8引入的一种强大特性，它允许以简洁的方式表示匿名函数（即没有名字的函数）。Lambda表达式可以用于许多场景，尤其是在与函数式接口、Stream API、并发编程等结合时，能够显著简化代码并提高开发效率。…...

编程日记 2025/7/28 1:14:42

英语听力口语词汇--2.宣传类

1.approach uk /əˈprəʊtʃ/ n.（思考问题的）方式，方法，态度 2.foreign uk /ˈfɒr.ən/ adj.外国的 3.alliance uk /əˈlaɪ.əns/ n.结盟国家（或团体）,同盟国家（或团体）&...

编程日记 2025/7/4 19:20:37

『测试』测试基础

文章目录 1. 调试与测试的区别2. 开发过程中的需求3. 开发模型3.1 软件的生命周期3.2 瀑布模型3.2.1 瀑布模型的特点/缺点 3.3 螺旋模型3.3.1 螺旋模型的特点/缺点 3.4 增量模型与迭代模型3.5 敏捷模型3.5.1 Scrum模型3.5.2 敏捷模型中的测试 4 测试模型4.1 V模型4.2 W模型(双V…...

编程日记 2025/7/28 1:05:07

Pandas 时间处理利器：to_datetime() 与 Timestamp() 深度解析

Pandas 时间处理利器：to_datetime() 与 Timestamp() 深度解析在数据分析和处理中，时间序列数据扮演着至关重要的角色。Pandas 库凭借其强大的时间序列处理能力，成为 Python 数据分析领域的佼佼者。其中，to_datetime() 函数和 Ti…...

编程日记 2025/7/23 17:10:47

支持向量机的回归用法详解

支持向量机的回归用法详解在机器学习的广阔领域中，支持向量机（SVM）是一种极具影响力的算法，它不仅在分类任务上表现出色，在回归任务中同样有着独特的应用价值。本文将深入探讨 SVM 的回归用法，包括其基本…...

编程日记 2025/7/23 16:46:18

计算机基础

今天不和大家分享算法了，最近为什么一直分享算法题，一个是因为最近很忙加上状态不太在线，第二个是因为我报了ICPC的比赛，也就是大学生程序设计大赛，所以平时刷算法比较多一些，虽然说结果上也没有很多的收获…...

编程日记 2025/7/27 19:49:41

用C语言实现的——一个支持完整增删查改功能的二叉排序树BST管理系统，通过控制台实现用户与数据结构的交互操作。

一、知识回顾二叉排序树（Binary Search Tree，BST），又称二叉查找树或二叉搜索树，是一种特殊的二叉树数据结构。基本性质： ①有序性对于树中的每个节点，其左子树中所有节点的值都小于该节点的…...

编程日记 2025/7/24 23:07:35

uniapp-商城-53-后台商家信息（更新修改和深浅copy）

1、概述文章主要讨论了在数据库管理中如何处理用户上传和修改商家信息的问题，特别是通过深浅拷贝技术来确保数据更新的准确性和安全性。首先，解释了深拷贝和浅拷贝的区别：浅拷贝使得两个变量共享相同的内存地址，而深拷贝则创建新…...

编程日记 2025/7/26 13:49:25

vue数据可视化开发echarts等组件、插件的使用及建议-浅看一下就行

在 Vue 项目中使用 ECharts 进行数据可视化开发时，可以结合 Vue 的响应式特性和 ECharts 的强大功能，实现动态、交互式的图表展示。一、ECharts 基础使用 1. 安装 ECharts npm install echarts2. 在 Vue 组件中使用 ECharts <template><div…...

编程日记 2025/7/23 4:49:04

百度AI战略解析：文心一言与自动驾驶的双轮驱动

百度AI战略解析：文心一言与自动驾驶的双轮驱动系统化学习人工智能网站（收藏）：https://www.captainbed.cn/flu 文章目录百度AI战略解析：文心一言与自动驾驶的双轮驱动摘要引言一、技术架构：大模型与自动…...

编程日记 2025/7/27 22:32:46

MCP Streamable HTTP 传输层的深度解析及实战分析

一、Streamable HTTP 传输层设计革新 1. 核心设计思想协议融合：将 HTTP/1.1、HTTP/2 与 SSE 协议特性深度整合动态协商：通过 HTTP Header 实现传输协议动态协商（X-MCP-Transport）流式优先：默认启用流式传输，支持半双工通信背压控制：基于 HTTP/2 流级流量控制实现智能速…...

编程日记 2025/7/25 14:29:39