Vue的生命周期

article/2025/8/29 19:18:30

一、生命周期是什么

生命周期(Life Cycle)的概念应用很广泛,特别是在政治、经济、环境、技术、社会等诸多领域经常出现,其基本涵义可以通俗地理解为“从摇篮到坟墓”(Cradle-to-Grave)的整个过程在Vue中实例从创建到销毁的过程就是生命周期,即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线,每个工人(生命周期)站在各自的岗位,当任务流转到工人身边的时候,工人就开始工作PS:在Vue生命周期钩子会自动绑定 this 上下文到实例中,因此你可以访问数据,对 property 和方法进行运算这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())

二、生命周期有哪些

一、生命周期

Vue 组件的生命周期分为 8 个核心阶段3 个特殊场景钩子,贯穿组件从创建到销毁的整个过程。以下是各阶段的详细说明:

生命周期钩子触发时机典型应用场景
beforeCreate组件实例刚被创建,尚未初始化数据和 DOM可在此阶段添加加载动画、初始化非响应式数据。
created组件实例创建完成,数据观测(data)和方法(methods)已初始化,但未开始渲染 DOM。发送 AJAX 请求获取数据、注册全局事件监听。
beforeMount组件 即将挂载到 DOM,此时 $el 已生成(虚拟 DOM),但未插入真实 DOM。访问渲染前的虚拟 DOM 结构,或在渲染前修改组件配置。
mounted组件 已挂载到真实 DOM$el 存在且可操作。操作真实 DOM(如初始化第三方库,如 Vue.js 与 jQuery 结合)、绑定滚动事件等。
beforeUpdate组件数据更新前触发,虚拟 DOM 尚未重新渲染可在此阶段获取更新前的 DOM 状态,或阻止不必要的更新(需结合 nextTick)。
updated组件数据更新完成,虚拟 DOM 重新渲染并打补丁到真实 DOM依赖更新后 DOM 结构的操作(如计算滚动位置、调整图表尺寸),需避免在此触发更新。
beforeDestroy组件 即将被销毁,实例仍可用。清除定时器、解绑全局事件、取消订阅等收尾工作,防止内存泄漏。
destroyed组件 已被销毁,所有子组件、事件监听和 DOM 关联被移除。无实际操作场景,仅用于确认销毁完成(如打印日志)。
二、特殊场景生命周期(3 钩子)
生命周期钩子触发时机适用场景
activated<keep-alive> 缓存的组件 激活时(首次进入或切回)。恢复组件状态(如重置滚动位置)、重新请求数据(需结合 deactivated 缓存数据)。
deactivated<keep-alive> 缓存的组件 停用时(离开页面或切换路由)。暂停动画、取消定时器、缓存当前组件状态(如表单数据)。
errorCaptured捕获到 子孙组件抛出的错误 时触发。全局错误处理(如记录错误日志、显示错误提示),可返回 false 阻止向上传播。

在这里插入图片描述


http://www.hkcw.cn/article/bkXqBsRgEO.shtml

相关文章

如何用Go创建一个 deployment 到容器拉起来的全流程

整体流程概述&#xff1a; 认证与配置&#xff1a; 连接到Kubernetes集群。创建Deployment对象&#xff1a; 构建一个appsv1.Deployment结构体&#xff0c;定义Pod的模板、副本数量、选择器等。发送创建请求&#xff1a; 使用Kubernetes Go客户端库将Deployment对象发送到API服…

echarts主题切换实现

文章目录 一、实现方式1.实现思路2.指定主题3.设置图表背景透明 二、具体实现1.监听与销毁2修改主题色细节 参考链接 一、实现方式 场景: 首先是我的项目有不同主题色&#xff0c;切换主题时候想要将echarts的图表主题色也一并更改&#xff0c;暂时只设置’light’和’dark’…

如何在 Ubuntu 24.04 服务器上安装 Apache Solr

Apache Solr 是一个免费、开源的搜索平台&#xff0c;广泛应用于实时索引。其强大的可扩展性和容错能力使其在高流量互联网场景下表现优异。 Solr 基于 Java 开发&#xff0c;提供了分布式索引、复制、负载均衡及自动故障转移和恢复等功能。 本教程将指导您如何在 Ubuntu 24.…

从零开始的云计算生活——第十四天,困难重重,安全管理。

一故事背景 在前面的基本无操作内容后&#xff0c;来到了大头内容&#xff0c;安全管理&#xff01;其中的防火墙相关的内容更是重中之重&#xff0c;要好好掌握&#xff0c;熟练运用。 二SELinux安全上下文 1SELinux 简介 a. SELinux&#xff08;Security-Enhanced Linux&…

UDP编程

udp是无连接的&#xff0c;没有listen 与 accept。 bind 服务端一定需要bind&#xff0c;告知别人自己的ip和port。 客户端可以不bind&#xff0c;在发送数据时候可以随机分配&#xff0c;客户端推荐bind&#xff08;与tcp不同&#xff0c;udp本身无连接&#xff09;。 注意&am…

【计网】分片

MF DF MAC帧 MTU 首部数据载荷 片偏移是整数

记录一个梦,借助大语言模型图片生成

梦见家门口有一条大河&#xff0c;但大河和其它景物都是灰暗没有鲜艳色彩很普通的梦中场景。大河似乎是长江的支流&#xff0c;但也可能有一个响亮的名字似乎是金沙江。 突然看到一条金红色的龙在快速游动&#xff0c;不敢相信自己的眼睛&#xff0c;因为一直不相信有这种生物…

PostgreSQL查询一个表的数据

要从一个表中检索数据就是按要求查询表的信息&#xff0c;。SQL的SELECT语句可分为&#xff1a; 1.选择列表&#xff08;选择查询返回的列&#xff09; 2.表列表操作&#xff08;从中查询出的数据&#xff0c;进一步进行加减乘除-*/、筛选等操作&#xff09; 3.可选的条件 whe…

聊聊后端面试中的MySQL高频考题

如大家所了解的&#xff0c;SQL&#xff08; Structured Query Language &#xff09;是一门在开发者中使用覆盖率超50%的数据库结构化查询语言。 不可否认&#xff0c;无论是常年与数据打交道的数据分析师和数据科学家&#xff0c;经常需要管理和维护数据库的数据库管理员&am…

R3GAN利用配置好的Pytorch训练自己的数据集

简介 简介:这篇论文挑战了"GANs难以训练"的广泛观点,通过提出一个更稳定的损失函数和现代化的网络架构,构建了一个简洁而高效的GAN基线模型R3GAN。作者证明了通过合适的理论基础和架构设计,GANs可以稳定训练并达到优异性能。 论文题目:The GAN is dead; long l…

【python深度学习】Day 39 图像数据与显存

知识点 图像数据的格式&#xff1a;灰度和彩色数据模型的定义显存占用的4种地方 模型参数梯度参数优化器参数数据批量所占显存神经元输出中间状态 batchisize和训练的关系 作业&#xff1a;今日代码较少&#xff0c;理解内容即可 一、图像数据的介绍 结构化数据&#xff08;如表…

mongodb源码分析session接受客户端find命令过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制。 现在继续研究ASIOSession和connection是怎么接受客户端命令的&#xff1f; mongo/transport/service_state_machine.cpp核心方法有&#xf…

酒店管理破局:AI 引领智能化转型

一、酒店行业现状&#xff1a;规模扩张加速与效率瓶颈并存 根据中国五矿证券《中国酒店行业格局分析》报告&#xff0c;国内酒店行业呈现头部集中化趋势。截至2024年第三季度&#xff0c;锦江酒店以13,186家门店、125.8万间客房的规模稳居行业第一[1]。华住集团则以178.68亿元…

大模型深度学习之双塔模型

前言 双塔模型&#xff08;Two-Tower Model&#xff09;是一种在推荐系统、信息检索和自然语言处理等领域广泛应用的深度学习架构。其核心思想是通过两个独立的神经网络&#xff08;用户塔和物品塔&#xff09;分别处理用户和物品的特征&#xff0c;并在共享的语义空间中通过相…

【Java Web】速通CSS

参考笔记:JavaWeb 速通CSS_java css-CSDN博客 目录 一、CSS入门 1. 基本介绍 2. 作用 二、CSS的3种引入方式 1. 行内式 1.1 示例代码 1.2 存在问题 2. 写在head标签的style子标签中 2.1 示例代码 2.2 存在问题 3.以外部文件的形式引入(开发中推荐使用)⭐⭐⭐ 3.1 说明 3…

PostgreSQL安装

我们使用开源的对象关系型数据库--PostgreSQL&#xff0c;它具有高性能、可扩展和支持复杂查询的特性&#xff0c;非常适合现在学习使用。 一.安装PostgreSQL 我用的windows&#xff0c;就在windows上安装。 1.首先访问 PostgreSQL 官方网站https://www.postgresql.org/dow…

C++:栈帧、命名空间、引用

一、前置知识 1.1、栈区&#xff08;Stack&#xff09; 1.1.1、内存分配与回收机制 分配方式​​&#xff1a;由编译器自动管理&#xff0c;通过调整栈指针&#xff08;ESP/RSP&#xff09;实现。 函数调用时&#xff0c;栈指针下移&#xff08;栈从高地址向低地址增长&…

【HarmonyOS 5】鸿蒙应用px,vp,fp概念详解

【HarmonyOS 5】鸿蒙应用px&#xff0c;vp&#xff0c;fp概念详解 一、前言 目前的鸿蒙开发者&#xff0c;大多数是从前端或者传统移动端开发方向&#xff0c;转到鸿蒙应用开发方向。 前端开发同学对于开发范式很熟悉&#xff0c;但是对于工作流程和开发方式是会有不适感&am…

[Rust_1] 环境配置 | vs golang | 程序运行 | 包管理

目录 Rust 环境安装 GoLang和Rust 关于Go 关于Rust Rust vs. Go&#xff0c;优缺点 GoLang的优点 GoLang的缺点 Rust的优点 Rust的缺点 数据告诉我们什么&#xff1f; Rust和Go的主要区别 (1) 性能 (2) 并发性 (3) 内存安全性 (4) 开发速度 (5) 开发者体验 Ru…

Codeforces Round 1024 (Div. 2)

Problem - A - Codeforces 思维题&#xff1a; 如果n不能整除p&#xff0c;就会多出一部分&#xff0c;这个部分可以作为调和者&#xff0c;使整个数组符合要求。 如果n能整除p&#xff0c;没有调和空间&#xff0c;只有看n/p*qm 来看代码&#xff1a; #include <bits/s…