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

Vue 生命周期钩子总结


Vue 生命周期钩子总结

Vue 组件的生命周期钩子允许在组件不同阶段执行自定义逻辑。以下是各阶段的钩子函数及其用途、触发时机和注意事项:


1. 生命周期阶段概览

Vue 组件的生命周期分为四个主要阶段:

  1. 创建(Creation):初始化数据观测、事件等。
  2. 挂载(Mounting):将组件挂载到 DOM。
  3. 更新(Updating):响应数据变化,重新渲染。
  4. 销毁(Destruction):销毁组件实例,清理资源。

2. Vue2 生命周期钩子

钩子函数及触发顺序
钩子函数触发时机用途
beforeCreate实例初始化后,数据观测/事件配置前初始化非响应式变量(如插件配置)
created实例创建完成,数据观测/事件配置完成发起异步请求、访问响应式数据
beforeMount挂载开始前(编译模板,生成虚拟 DOM)极少使用
mounted实例挂载到 DOM 后操作 DOM、初始化第三方库
beforeUpdate数据变化后,重新渲染前获取更新前的 DOM 状态
updated数据变化导致重新渲染完成操作更新后的 DOM
beforeDestroy实例销毁前清理定时器、取消事件监听
destroyed实例销毁后极少使用
代码示例
export default {beforeCreate() {console.log('beforeCreate:数据未初始化');},created() {console.log('created:数据已初始化,可访问 this.data');},beforeMount() {console.log('beforeMount:模板编译完成,未挂载到 DOM');},mounted() {console.log('mounted:DOM 已挂载');},beforeUpdate() {console.log('beforeUpdate:数据变化,DOM 更新前');},updated() {console.log('updated:DOM 更新完成');},beforeDestroy() {console.log('beforeDestroy:实例销毁前');},destroyed() {console.log('destroyed:实例已销毁');}
}

3. Vue3 生命周期钩子变化

Vue3 保留了 Vue2 的生命周期钩子,但命名略有调整,并新增了 setup 函数作为组合式 API 的入口。

主要变化
  1. 钩子函数前缀
    • Vue2 的 beforeDestroy → Vue3 的 beforeUnmount
    • Vue2 的 destroyed → Vue3 的 unmounted
  2. 组合式 API
    • setup() 中使用生命周期钩子需通过 onX 函数(如 onMounted)。
Vue3 钩子对照表
Vue2 钩子Vue3 钩子说明
beforeCreatesetup()setup() 替代
createdsetup()setup() 替代
beforeMountonBeforeMount挂载前执行
mountedonMounted挂载后执行
beforeUpdateonBeforeUpdate更新前执行
updatedonUpdated更新后执行
beforeDestroyonBeforeUnmount卸载前执行
destroyedonUnmounted卸载后执行
Vue3 组合式 API 示例
import { onMounted, onUnmounted } from 'vue';export default {setup() {onMounted(() => {console.log('mounted:DOM 已挂载');});onUnmounted(() => {console.log('unmounted:实例已销毁');});}
}

4. 常见使用场景

钩子函数典型场景
created发起 API 请求、初始化非 DOM 相关数据
mounted操作 DOM、初始化图表库(如 ECharts)
beforeUpdate获取更新前的滚动位置
updated数据变化后调整 UI 布局
beforeUnmount清除定时器、取消全局事件监听

5. 注意事项

  1. 避免在 created/mounted 中阻塞主线程
    异步操作(如 API 请求)应使用 async/await 或 Promise,避免页面卡顿。
  2. 不要在 updated 中修改状态
    可能导致无限循环更新。
  3. Vue3 的 setup 替代了 beforeCreate/created
    所有初始化逻辑应在 setup() 中完成。
  4. SSR 中不可用的钩子
    beforeMountmountedbeforeUpdateupdated 在服务端渲染时不会执行。

6. 特殊场景钩子

activateddeactivated
  • 用途:用于 <keep-alive> 缓存的组件,监听组件的激活/停用状态。
  • 示例
    export default {activated() {console.log('组件被激活(从缓存中恢复)');},deactivated() {console.log('组件被停用(进入缓存)');}
    }
    
错误处理钩子(Vue2.5+)
  • errorCaptured:捕获子组件树中的错误,可用于全局错误上报。
    export default {errorCaptured(err, vm, info) {console.error('捕获到错误:', err);return false; // 阻止错误继续向上传播}
    }
    

总结

  • Vue2 生命周期钩子beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed
  • Vue3 主要变化:重命名销毁阶段钩子,引入组合式 API 的 onX 函数。
  • 核心原则
    • 数据初始化created(Vue2)或 setup(Vue3)。
    • DOM 操作mounted 后执行。
    • 资源清理beforeUnmount/beforeDestroy 中完成。

理解生命周期钩子的执行顺序和适用场景,有助于编写高效、可维护的 Vue 组件。

相关文章:

Vue 生命周期钩子总结

Vue 生命周期钩子总结 Vue 组件的生命周期钩子允许在组件不同阶段执行自定义逻辑。以下是各阶段的钩子函数及其用途、触发时机和注意事项&#xff1a; 1. 生命周期阶段概览 Vue 组件的生命周期分为四个主要阶段&#xff1a; 创建&#xff08;Creation&#xff09;&#xff1…...

【解决方案】Linux解决CUDA安装过程中GCC版本不兼容

Linux解决CUDA安装过程中GCC版本不兼容 目录 问题描述 解决方法 安装后配置 问题描述 Linux环境下安装 CUDA 时&#xff0c;运行sudo sh cuda_10.2.89_440.33.01_linux.run命令出现 “Failed to verify gcc version.” 的报错&#xff0c;提示 GCC 版本不兼容&#xff0c;查…...

网络准入控制系统推荐:2025年构建企业网络安全的第一道防线

随着信息技术的飞速发展&#xff0c;企业网络环境日益复杂&#xff0c;阳途网络准入控制系统作为一种先进的网络安全解决方案&#xff0c;其核心是确保网络接入的安全性。 一、网络准入控制系统的基本原理与功能 网络准入控制以“只有合法的用户、安全的终端才可以接入网络”为…...

AI Agent

李宏毅&#xff1a;从零开始搞懂 AI Agent - 知乎台大李宏毅2025 AI Agent新课来了&#xff01; - 知乎读懂AI Agent&#xff1a;基于大模型的人工智能代理 - 知乎 1.什么是AI Agent 一个基于大模型的 AI Agent 系统可以拆分为大模型、规划、记忆与工具使用四个组 件部分。AI A…...

大模型如何应对内容安全:原理、挑战与技术路径探讨

随着大语言模型&#xff08;LLM&#xff09;技术的广泛应用&#xff0c;从AI写作助手到智能客服、再到生成式内容平台&#xff08;AIGC&#xff09;&#xff0c;AI 正以前所未有的速度深入人类社会的各个角落。然而&#xff0c;随之而来的内容安全问题也日益凸显&#xff1a;模…...

Flinkcdc 实现 MySQL 写入 Doris

Flinkcdc 实现 MySQL 写入 Doris Flinkcdc 实现 MySQL 写入 Doris 一、环境配置 Doris&#xff1a;3.0.4 JDK 17 MySQL &#xff08;业务数据库&#xff09;&#xff1a;5.7 MySQL&#xff08;本地数据库&#xff09;&#xff1a;5.7 Flink&#xff1a;flink-1.19.1 flinkc…...

vim粘贴代码格式错乱 排版错乱 缩进错乱 解决方案

从IDE复制代码, 粘贴到vim打开的文件 出现以下格式错乱解决方案 在使用 Vim 编辑器粘贴代码时&#xff0c;出现格式错乱的问题&#xff0c;通常是因为 Vim 的自动缩进功能与粘贴的代码发生了冲突。Vim 默认会尝试对输入的内容进行自动缩进&#xff0c;这会导致粘贴的代码被错误…...

发那科机器人(基本操作、坐标系、I/O通信)

发那科机器人(基本操作、坐标系、I/O通信) 一,机器人基本操作1,坐标系种类2,机器人手动操作一关节运动3,机器人手动操作一直角运动二,坐标系建立1,工具坐标系建立原理及验证方法2,工具坐标系建立步骤3,用户坐标系建立原理及验证方法4,用户坐标系建立步骤三,I/O通信…...

GPU 架构入门笔记

引文位置&#xff1a;https://www.trainy.ai/blog/gpu-utilization-misleading 相关概念是通过 ChatGPT 迅速学习总结而成。 概念&#xff1a; GPU H100 GPU, with 144 SMs 每个 SM&#xff08;streaming multiprocessors&#xff09; 的架构&#xff1a; GPU Utilizati…...

centos7使用yum快速安装Docker环境

一、基础环境设置 1&#xff1a;关闭防火墙和内核安全机制 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 02&#xff1a;配置网络yum源 [rootlocalhost ~]# curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Cento…...

解密面试高频题:加权轮询负载均衡算法 (Java 实现)

在分布式系统设计和面试中&#xff0c;负载均衡是一个绕不开的话题。而加权轮询&#xff08;Weighted Round Robin, WRR&#xff09;作为一种经典且实用的负载均衡策略&#xff0c;经常出现在笔试题和面试环节中。本文将带你深入理解 WRR 算法的原理&#xff0c;并探讨几种常见…...

Linux中的系统延时任务和定时任务与时间同步服务和构建时间同步服务器

延时任务 在系统中我们的维护工作大多数时在服务器行对闲置时进行 我们需要用延迟任务来解决自动进行的一次性的维护 延迟任务时一次性的&#xff0c;不会重复执行 当延迟任务产生输出后&#xff0c;这些输出会以邮件的形式发送给延迟任务发起者 在RHEL9中默认系统中的所有普通…...

高效运维,智慧监测:COMEM光纤温度测量系统在电力行业中的应用

在电力行业中&#xff0c;变压器的稳定运行对于整个电网的安全很重要。为了确保变压器的健康状态&#xff0c;实时、精确的温度监测成为了不可或缺的一环。COMEM光纤温度测量系统应运而生&#xff0c;为变压器的温度监测提供了创新的解决方案。 变压器温度监测的重要性 变压器在…...

TP5兼容达梦国产数据库

1.首先数据库安装&#xff0c;部署时需配置大小写不敏感 2.安装PHP达梦扩展&#xff0c;一定要是对应版本&#xff08;兼容操作系统&#xff09;的扩展&#xff0c;否则会出现各种报错。参考官方文档&#xff1a;https://eco.dameng.com/document/dm/zh-cn/app-dev/php_php_new…...

[leetcode]2302.统计得分小于k的子数组

1.题目 2.事例 3.数据规模 4.思路&#xff08;滑动窗口&#xff09; 4.1滑动窗口的定义 滑动窗口是一种在数组、字符串等序列数据结构上进行操作的算法技巧。以下是其定义及相关要素的详细介绍&#xff1a; 定义&#xff1a;滑动窗口可以理解为在一个序列上&#xff0c;用一…...

Linux网络编程:TCP多进程/多线程并发服务器详解

Linux网络编程&#xff1a;TCP多进程/多线程并发服务器详解 TCP并发服务器概述 在Linux网络编程中&#xff0c;TCP服务器主要有三种并发模型&#xff1a; 多进程模型&#xff1a;为每个客户端连接创建新进程多线程模型&#xff1a;为每个客户端连接创建新线程I/O多路复用&am…...

Nacos源码—1.Nacos服务注册发现分析二

大纲 1.客户端如何发起服务注册 发送服务心跳 2.服务端如何处理客户端的服务注册请求 3.注册服务—如何实现高并发支撑上百万服务注册 4.内存注册表—如何处理注册表的高并发读写冲突 2.服务端如何处理客户端的服务注册请求 (1)客户端自动发送服务注册请求梳理 (2)Nacos…...

设备指纹护航电商和金融反欺诈体系建设

众所周知&#xff0c;人的指纹具有唯一性&#xff0c;可以作为人的身份识别标识。对于设备而言&#xff0c;也有可以用于识别的特征。设备指纹是指可以用于唯一标识出某一设备的特征或者独特的设备标识&#xff0c;具有固定性、较难篡改性、唯一性等特质。 设备指纹是金融机构…...

FFmpeg源码学习---ffmpeg

1、ffmpeg源码主函数 ┌────────────────────┐ │ main() │ └─────────┬───────────┘ ↓ ┌────────────────────┐ │ 初始化 (日志/网络等) │ │ init_dynload() │ │ avf…...

leetcode 206. 反转链表

题目描述&#xff1a; 迭代法&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, ListNode …...

NVIDIA新模型DAM-3B:描述一切,图像视频局部描述新突破

在数字时代&#xff0c;图像和视频内容爆炸式增长&#xff0c;如何让AI像人类一样精准描述画面中的特定区域&#xff0c;成为计算机视觉领域的核心挑战。传统模型要么丢失细节&#xff0c;要么缺乏上下文&#xff0c;而NVIDIA与UC Berkeley联合团队提出的DAM&#xff08;Descri…...

7、langChain和RAG实战:基于LangChain和RAG的常用案例实战

PDF 文档问答ChatBot 本地上传文档 支持 pdf支持 txt支持 doc/docx问答页面 python环境 新建一个requirements.txt文件streamlit python-docx PyPDF2 faiss-cpu langchain langchain-core langchain-community langchain-openai然后安装相应的包pip install -r requirements.t…...

c++11: 类型转换

目录 一 C语言中的类型转换 二 . C强制类型转换 1. static_cast 2. reinterpret_cast 3. const_cast 4. dynamic_cast 三 explicit 关键字 一 C语言中的类型转换 在C语言中&#xff0c;如果赋值运算符左右两侧类型不同&#xff0c;或者形参与实参类型不匹配&#xff…...

Matlab自学笔记五十二:变量名称:检查变量名称是否存在或是否与关键字冲突

1.变量名称的命名规则 有效的变量名称以字母开头&#xff0c;后跟字母、数字或下划线&#xff0c;Matlab变量名称对字母大小写是区分的&#xff0c;A和a是不相同的变量&#xff0c;不能使用与Matlab关键字冲突的变量名称&#xff0c;例如if、end等&#xff0c;判断一个字符是不…...

西门子PLC结构化编程_水处理系统水泵多备多投

文章目录 前言一、功能概述二、程序编写1. 需求分析2. 编写运行时间累计功能块3. 创建自定义数据类型1. 时间排序数据类型2. 多备多投数据类型3. 多备多投切换数据类型 4. 编程1. 创建DB数据块1. 多备多投数据块2. 多备多投切换数据块 2. 创建FB功能块 三、程序调用总结 前言 …...

AutoGen 框架深度解析:构建多智能体协作的事件驱动架构

在当下多智能体(Multi-Agent)AI系统快速发展的背景下,AutoGen 作为微软研究院开源的编程框架,为构建可扩展、灵活且可调试的智能体协作应用提供了完备的工具与最佳实践。本文将从设计动机、核心架构、关键概念、安装与快速上手、典型场景、进阶特性、生态与扩展、最佳实践,…...

算法相关概念

1 算法概述 1.1 算法概念 算法是特定问题求解步骤的描述&#xff0c;也是独立存在的一种解决问题的思想和方法 对于算法而言&#xff0c;实现他的编程语言无关紧要&#xff0c;重要的是思想和方法&#xff01;&#xff01;&#xff01; 公式&#xff1a;程序算法数据结构&a…...

《Astro 3.0岛屿架构让内容网站“脱胎换骨”》

内容优先的网站越来越成为主流。无论是新闻资讯、知识博客&#xff0c;还是电商产品展示&#xff0c;用户都希望能快速获取所需内容&#xff0c;这对网站的性能和体验提出了极高要求。而Astro 3.0的岛屿架构&#xff0c;就像是为内容优先网站量身定制的一把神奇钥匙&#xff0c…...

Vue3 + Element-Plus + 阿里云文件上传

Element-Plus 阿里云文件上传 1、选择文件夹方法2、Chrome 浏览器查看 input typefile 元素上传的文件方法3、上传文件4、FormDataFormData 是什么创建 FormDataFormData 常用方法FormData 的实际应用性能与注意事项总结 1、选择文件夹方法 input typefile 元素想要上传文件夹…...

【Linux】第十一章 管理网络

目录 1.TCP/IP网络模型 物理层&#xff08;Physical&#xff09; 数据链路层&#xff08;Date Link&#xff09; 网络层&#xff08;Internet&#xff09; 传输层&#xff08;Transport&#xff09; 应用层&#xff08;Application&#xff09; 2. 对于 IPv4 地址&#…...

用vite动态导入vue的路由配置

在Vue应用中&#xff0c;通过路由可以实现不同页面之间的切换&#xff0c;同时也可以实现页面之间的传参和控制页面的显示与隐藏。但是我们在开发的过程中&#xff0c;会发现在路由配置中的路由配置和我们的项目结构高度重复&#xff0c;在我们修改页面文件结构时非常的麻烦与复…...

sources.list.d目录

sources.list可能大家很熟悉&#xff0c;是配置镜像链接的地方。 sources.list.d其实就是一个目录&#xff0c;在linux系统中.d后缀一般定义为一个目录&#xff0c;且很喜欢用这种方式。 这种方式有一个好处&#xff0c;就是修改不会影响到sources.list文件&#xff0c; 在这里…...

【C语言】文件操作

目录 一为什么使用文件 二什么是文件 程序文件 数据文件 文件名 二进制文件和文本文件&#xff1f; 三文件的打开与关闭 流的概念 标准流 文件指针 指针的声明 指针的初始化 四文件的打开与关闭 打开 fopen()函数 五总结&#xff1a; 前言&#xff1a; …...

静态库与动态库简介

静态库与动态库简介 基本概念 静态库 静态库是在编译链接阶段被直接整合到可执行文件中的代码集合。链接器会从静态库中提取程序所需的所有对象&#xff0c;并将它们复制到最终的可执行文件中。 特点&#xff1a; 可执行文件包含了所有代码&#xff0c;运行时无需外部依赖…...

02《小地图实时》Unity

创建一个新的项目 创建一个球体 作为主角 重命名为Player 在主角上创建空的子物体 重命名为MiniMapIcon 增加一个精灵图片 并设置为绿色 增加一个层&#xff08;目的是在小地图中看的到 而在场景中看不到这个绿色Icon&#xff09; 命名为MiniMap 在主摄像机中设置剔除遮罩Culli…...

【Redis】基础4:作为分布式锁

文章目录 1. 一些概念2. MySQL方案2.1 方案一&#xff1a;事务特性2.1.1 存在的问题2.1.2 解决方案 2.2 方案二&#xff1a;乐观锁2.3 方案三&#xff1a;悲观锁 3. Redis3.1 实现原理3.2 实现细节3.2.1 问题1&#xff1a;持有期间锁过期问题3.2.2 问题2&#xff1a;判断和释放…...

迭代器与生成器

目录 Iterator 的作用 Iterator 的遍历过程 Symbol.iterator方法 实现iterator接口的自定义类示例 Generator函数 迭代器对象的next方法的运行逻辑 迭代器对象除了具有next方法&#xff0c;还可以具有return方法。 Iterator 的作用 为各种数据结构&#xff0c;提供一个统…...

Python 实现的运筹优化系统数学建模详解(动态规划模型)

相关代码链接&#xff1a;https://download.csdn.net/download/heikediguoshinib/90713747?spm1001.2014.3001.5503 一、引言 在计算机科学与数学建模的广阔领域中&#xff0c;算法如同精密的齿轮&#xff0c;推动着问题的解决与系统的运行。当面对复杂的优化问题时&…...

miniconda在ARM64位芯片上面的安装

文章目录 前言一、特点二、适用场景三、下载安装及使用1.下载脚本文件2.安装命令3.常见用法 总结 前言 Miniconda 是一个轻量级的 Python 发行版&#xff0c;它是 Anaconda 的一个简化版本。Anaconda 是一个广泛使用的数据科学平台&#xff0c;包含了众多的 Python 包和工具&a…...

vue跨域问题总结笔记

目录 一、Websocket跨域问题 1.nginx配置 2.VUE CLI代理 3.env.development配置 4.nginx日志 5.解决 一、解决跨域的几种常用方法 1.Vue CLI代理 2.JSONP 3.WebSocket 4.NGINX解决跨域问题 6.Java解决跨域 二、Vue跨域问题详解 1. 什么是跨域 2. 跨域的例子 3.…...

自动驾驶领域专业词汇(专业术语)整理

以下是分类整理的自动驾驶领域专业词汇表&#xff0c;涵盖 AI、芯片、传感器、自动驾驶核心、辅助驾驶、安全、通信、车灯、泊车、测试标准 等类别&#xff1a; AI相关 缩写英文全称中文解释AIArtificial Intelligence人工智能&#xff0c;模拟人类智能的技术体系NNNeural Ne…...

说一下react更新的流程

beginWork 使用v-dom和current fiber去生成子节点的workInProgress Fiber 期间会执行函数组件、类组件、diff子节点 给我需要变更的节点&#xff0c;打赏effectTag 增placement 2 0010 删deletion 8 1000 改 update 4 0100 增和改 placementAndUpdate…...

C 语言函数指针与指针函数详解

一、引言 在 C 语言的编程世界中&#xff0c;函数指针和指针函数是两个既强大又容易混淆的概念。它们为 C 语言带来了更高的灵活性和可扩展性&#xff0c;广泛应用于回调函数、动态链接库、状态机等多种场景。深入理解和掌握函数指针与指针函数&#xff0c;对于提升 C 语言编程…...

政策支持与市场驱动:充电桩可持续发展的双轮引擎

随着全球能源转型加速&#xff0c;新能源汽车成为实现低碳交通的重要方向。然而&#xff0c;充电基础设施不足仍是制约其普及的关键瓶颈。当前&#xff0c;国际主流的充电桩运营模式包括政府推动、电网企业推动及汽车厂商推动三种模式&#xff0c;但单一模式均存在显著局限性。…...

在 Ubuntu 22.04 x64 系统安装/卸载 1Panel 面板

一、 1Panel 是什么&#xff1f; 1Panel 是一款基于 Go 语言开发的现代化开源服务器管理面板&#xff08;类似宝塔面板&#xff09;&#xff0c;专注于容器化&#xff08;Docker&#xff09;和云原生环境管理&#xff0c;提供可视化界面简化服务器运维操作。 1. 1Panel主要功…...

dummy cli-tool ubuntu22.04使用

项目场景&#xff1a;dummy cli-tool ubuntu22.04使用 提示&#xff1a;这里简述项目相关背景&#xff1a;执行python3 run_shell.py时报错 例如&#xff1a;项目场景&#xff1a;示例:通过蓝牙芯片(HC-05)与手机 APP 通信&#xff0c;每隔 5s 传输一批传感器数据(不是很大) …...

厚铜板的镀前处理差异:工艺参数与成本影响

在现代电子设备中&#xff0c;厚铜电路板因其优异的导电性能和良好的热管理能力而备受青睐。生产过程中&#xff0c;对铜层进行电镀加厚是一个关键步骤&#xff0c;它涉及到一系列复杂的化学和物理过程。在进行电镀之前&#xff0c;必须对电路板进行适当的准备工作&#xff0c;…...

【C到Java的深度跃迁:从指针到对象,从过程到生态】第四模块·Java特性专精 —— 第十六章 多线程:从pthread到JMM的升维

一、并发编程的范式革命 1.1 C多线程的刀耕火种 C语言通过POSIX线程&#xff08;pthread&#xff09;实现并发&#xff0c;需要开发者直面底层细节&#xff1a; 典型pthread实现&#xff1a; #include <pthread.h> int counter 0; pthread_mutex_t lock PTHREAD…...

数据库学习笔记(十三)---存储过程

前言&#xff1a; 学习和使用数据库可以说是程序员必须具备能力&#xff0c;这里将更新关于MYSQL的使用讲解&#xff0c;大概应该会更新30篇&#xff0c;涵盖入门、进阶、高级(一些原理分析);这一篇存储过程&#xff0c;下一篇是存储函数;虽然MYSQL命令很多&#xff0c;但是自…...

JWT(JSON Web Token)源码分析

Java - JWT的简单介绍和使用 Java JWT&#xff1a;原理、机制及案例示范 什么是JWT&#xff1f; 1.1 JWT的基本概念 JWT&#xff08;JSON Web Token&#xff09;是一种用于在各方之间传递JSON格式信息的紧凑、URL安全的令牌&#xff08;Token&#xff09;。JWT的主要作用是验…...