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

请解释 Vue 中的生命周期钩子,不同阶段触发的钩子函数及其用途是什么?

vue生命周期钩子详解(Vue 3版本)

一、生命周期阶段划分

Vue组件的生命周期可分为四大阶段,每个阶段对应特定钩子函数:

  1. 创建阶段:初始化实例并准备数据
  2. 挂载阶段:将虚拟DOM渲染为真实DOM
  3. 更新阶段:响应数据变化并重新渲染
  4. 销毁阶段:清理资源并终止组件
二、核心钩子函数及用途
import { ref, onMounted, onUnmounted } from 'vue';export default {setup() {const count = ref(0);// 创建阶段onMounted(() => {console.log('组件已挂载,可操作DOM'); // [1,4,9](@ref)});// 更新阶段watchEffect(() => {console.log('数据更新,执行副作用'); // [1,4](@ref)});// 销毁阶段onUnmounted(() => {clearInterval(count.value); // [4,9](@ref)});return { count };}
};

1. 创建阶段

  • onMounted:组件挂载完成后触发,适合初始化第三方库、DOM操作
    onMounted(() => {const element = document.getElementById('app');element.style.color = 'red'; // [4,6](@ref)
    });
  • onBeforeMount:挂载开始前触发,用于模板预处理(Vue 3新增)

2. 挂载阶段

  • onRenderTracked:响应式依赖被追踪时触发(组合式API独有)
    onRenderTracked((event) => {console.log('依赖变化:', event.key); // [1,4](@ref)
    });

3. 更新阶段

  • onBeforeUpdate:数据更新但DOM未重绘前触发
    onBeforeUpdate(() => {console.log('数据即将更新'); // [4,9](@ref)
    });
  • onUpdated:DOM更新完成后触发
    onUpdated(() => {console.log('DOM已更新'); // [4,9](@ref)
    });

4. 销毁阶段

  • onBeforeUnmount:组件销毁前触发,用于清理工作
    onBeforeUnmount(() => {clearInterval(count.value); // [4,9](@ref)
    });
  • onUnmounted:组件完全销毁后触发
    onUnmounted(() => {console.log('组件已销毁'); // [4,9](@ref)
    });
三、使用建议
  1. 数据请求:优先在onMounted中发起,避免阻塞渲染
    onMounted(async () => {const data = await fetchData(); // [4,9](@ref)state.value = data;
    });
  2. DOM操作:仅在onMounted/onBeforeUpdate中进行
    onMounted(() => {const element = document.getElementById('my-element');element.addEventListener('click', handleClick); // [4,6](@ref)
    });
  3. 清理逻辑:必须成对出现(添加/移除事件监听、清除定时器)
    let timer = null;
    onMounted(() => {timer = setInterval(() => {}, 1000);
    });
    onBeforeUnmount(() => {clearInterval(timer); // [4,9](@ref)
    });
四、注意事项
  1. 避免阻塞主线程:不要在生命周期钩子中执行复杂计算
    // 错误示例:onMounted中执行大数据处理
    onMounted(() => {heavyComputation(); // [4,14](@ref)
    });
  2. 正确处理异步操作:使用watchEffectwatch监听数据变化
    watchEffect(() => {const data = await fetchData(count.value); // [1,4](@ref)state.value = data;
    });
  3. 父子组件生命周期顺序
    父 beforeMount -> 子 beforeMount -> 子 mounted -> 父 mounted
    父 beforeUnmount -> 子 beforeUnmount -> 子 unmounted -> 父 unmounted
  4. 组合式API注意事项
    • onMounted等钩子必须在setup函数内调用
    • 响应式数据需通过refreactive声明
    // 错误示例:未声明响应式数据
    setup() {onMounted(() => {console.log(nonRefData); // undefined});
    }
五、与React useEffect对比
Vue 生命周期React useEffect适用场景
onMounteduseEffect(() => {}, [])组件挂载后执行一次性操作
onBeforeUpdateuseEffect(() => {}, [data])数据更新前执行逻辑
onUnmounteduseEffect的清理函数组件销毁前清理资源

通过合理利用生命周期钩子,开发者可以精确控制组件的行为,提升代码可维护性和性能。在实际开发中,建议结合组合式API的watchEffectwatch实现更细粒度的响应式处理,同时严格遵循"挂载前/后"、"更新前/后"的操作规范,避免常见的内存泄漏和竞态条件问题。

相关文章:

请解释 Vue 中的生命周期钩子,不同阶段触发的钩子函数及其用途是什么?

vue生命周期钩子详解(Vue 3版本) 一、生命周期阶段划分 Vue组件的生命周期可分为四大阶段,每个阶段对应特定钩子函数: 创建阶段:初始化实例并准备数据挂载阶段:将虚拟DOM渲染为真实DOM更新阶段&#xff…...

C#上位机--选择语句(switch)

在 C# 上位机开发的广阔领域中,流程控制语句如同程序的 “交通枢纽”,精准地引导着程序的执行路径。继深入探讨if语句后,我们将目光聚焦于另一个重要的流程控制语句 ——switch语句。switch语句以其独特的多路分支结构,为处理多条…...

Hadoop初体验

一、HDFS初体验 1. shell命令操作 hadoop fs -mkdir /itcast hadoop fs -put zookeeper.out /itcast hadoop fs -ls / 2. Web UI页面操作 结论: HDFS本质就是一个文件系统有目录树结构 和Linux类似,分文件、文件夹为什么上传一个小文件也这…...

在vue2中操作数组,如何保证其视图的响应式

在 Vue 2 中,操作数组时需要注意一些方法不会触发视图的响应式更新。为了确保数组的操作是响应式的,可以使用 Vue 提供的响应式方法。以下是一些常见的操作及其替代方法: 使用 Vue.set 方法: 当你需要通过索引直接修改数组中的某个…...

CentOS的ssh复制文件

1.前提 首先要已经连接上了对方的ssh 2.命令 scp [文件] 目标IP:目标路径 例如: $PWD是一个环境变量,可以获取当前绝对目录,ssh上传的时候一定要确保对方有这个目录才行,不然会报错 3.递归上传 scp -r 目录 目标IP:路径 可以…...

Spring Cloud — Hystrix 服务隔离、请求缓存及合并

Hystrix 的核心是提供服务容错保护,防止任何单一依赖耗尽整个容器的全部用户线程。使用舱壁隔离模式,对资源或失败单元进行隔离,避免一个服务的失效导致整个系统垮掉(雪崩效应)。 1 Hystrix监控 Hystrix 提供了对服务…...

Vmware虚拟机Ubantu安装Docker、k8s、kuboard

准备工作: 切换用户:su root关闭防火墙: sudo ufw diasble关闭swap: systemctl stop swap.target systemctl status swap.target systemctl disable swap.target #开机禁用 systemctl stop swap.img.swap systemctl status swap.img.swap关闭虚拟交换分区 vim /…...

PHP建立MySQL持久化连接(长连接)及mysql与mysqli扩展的区别

如果在 PHP 5.3 的版本以前想要创建MySQL的持久化连接(长连接),需要显式调用 pconnect 创建: $con mysql_pconnect($server[host], $server[username], $server[password]); if (!($con false)) { if (mysql_select_db($server[database], $con) fals…...

python爬虫系列课程2:如何下载Xpath Helper

python爬虫系列课程2:如何下载Xpath Helper 一、访问极简插件官网二、点击搜索按钮三、输入xpath并点击搜索四、点击推荐下载五、将下载下来的文件解压缩六、打开扩展程序界面七、将xpath.crx文件拖入扩展程序界面一、访问极简插件官网 极简插件官网地址:https://chrome.zzz…...

【Python项目】基于Python的Web漏洞挖掘系统

【Python项目】基于Python的Web漏洞挖掘系统 技术简介: 采用Python技术、MySQL数据库、Django框架、Scrapy爬虫等技术实现。 系统简介: Web漏洞挖掘系统是一个基于B/S架构的漏洞扫描平台,旨在通过自动化的方式对网站进行漏洞检测。系统主要功…...

多环境日志管理:使用Logback与Logstash集成实现高效日志处理

多环境日志管理:使用Logback与Logstash集成实现高效日志处理 在现代软件开发中,有效的日志管理是至关重要的。无论是调试问题、监控应用性能还是审计用户活动,良好的日志策略都能大大提高工作效率。本文将详细介绍如何配置Spring Boot项目以…...

idea连接gitee(使用idea远程兼容gitee)

文章目录 先登录你的gitee拿到你的邮箱找到idea的设置选择密码方式登录填写你的邮箱和密码登录成功 先登录你的gitee拿到你的邮箱 具体位置在gitee–>设置–>邮箱管理 找到idea的设置 选择密码方式登录 填写你的邮箱和密码 登录成功...

STM32 看门狗

目录 背景 独立看门狗(IWDG) 寄存器访问保护 窗口看门狗(WWDG) 程序 独立看门狗 设置独立看门狗程序 第一步、使能对独立看门狗寄存器的写操作 第二步、设置预分频和重装载值 第三步、喂狗 第四步、使能独立看门狗 喂狗…...

飞书API

extend目录下,API <?php // ---------------------------------------------------------------------- // | 飞书API // ---------------------------------------------------------------------- // | COPYRIGHT (C) 2021 http://www.jeoshi.com All rights reserved. …...

深入解析 Hydra 库:灵活强大的 Python 配置管理框架

深入解析 Hydra 库&#xff1a;灵活强大的 Python 配置管理框架 在机器学习、深度学习和复杂软件开发项目中&#xff0c;管理和维护大量的配置参数是一项具有挑战性的任务。传统的 argparse、json 或 yaml 方式虽然能管理部分配置&#xff0c;但随着项目规模的增长&#xff0c…...

【开源免费】基于Vue和SpringBoot的失物招领平台(附论文)

本文项目编号 T 243 &#xff0c;文末自助获取源码 \color{red}{T243&#xff0c;文末自助获取源码} T243&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…...

科普:你的笔记本电脑中有三个IP:127.0.0.1、无线网 IP 和局域网 IP;两个域名:localhost和host.docker.internal

三个IP 你的笔记本电脑中有三个IP&#xff1a;127.0.0.1、无线网 IP 和局域网 IP。 在不同的场景下&#xff0c;需要选用不同的 IP 地址&#xff0c;如下为各自的特点及适用场景&#xff1a; 127.0.0.1&#xff08;回环地址&#xff09; 特点 127.0.0.1 是一个特殊的 IP 地…...

测试WSS服务器

必须有域名&#xff0c;证书也是强制关联这个域名&#xff0c;阿里云、腾讯云、百度云都可以申请免费的证书&#xff0c;外网对应的主机要备案到域名 备案&#xff1a;是针域名下的主机备案&#xff0c;不备案的话&#xff0c;会强制断网 这个网站可以测试本地WSS连接 ​​​​…...

unity学习49:寻路网格链接 offMeshLinks, 以及传送门效果

目录 1 网格链接 offMeshLinks 功能入口 1.1 unity 2022之前 1.2 unity 2022之后 2 网格链接 offMeshLinks 功能设置 3 点击 offMeshLinks 功能里的bake 3.1 unity 2022之前 3.2 unity 2022之后 3.3 实测link 3.4 跳跃距离增大&#xff0c;可以实现轻功类的效果 4 …...

Web 开发中的 5 大跨域标签解析:如何安全地进行跨域请求与加载外部资源

在 Web 开发中,跨域(Cross-Origin)是指从一个源(协议、域名、端口)访问另一个源的资源。以下是5个常见的用于跨域操作的 HTML 标签,它们主要用于跨域请求或加载外部资源:1. <script> 标签 用途:最常用于进行跨域请求的标签,特别是在 JSONP 技术中。浏览器允许通…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

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

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

【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...

实战设计模式之模板方法模式

概述 模板方法模式定义了一个操作中的算法骨架&#xff0c;并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下&#xff0c;重新定义算法中的某些步骤。简单来说&#xff0c;就是在一个方法中定义了要执行的步骤顺序或算法框架&#xff0c;但允许子类…...

【java面试】微服务篇

【java面试】微服务篇 一、总体框架二、Springcloud&#xff08;一&#xff09;Springcloud五大组件&#xff08;二&#xff09;服务注册和发现1、Eureka2、Nacos &#xff08;三&#xff09;负载均衡1、Ribbon负载均衡流程2、Ribbon负载均衡策略3、自定义负载均衡策略4、总结 …...