Vue生命周期
一、Vue的生命周期及其阶段
Vue生命周期:一个Vue实例从 创建 到 销毁 的整个过程。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
生命周期的四个阶段:① 创建 ② 挂载 ③ 更新 ④ 销毁
二、Vue生命周期函数(钩子函数)
Vue生命周期过程中,会自动运行一些函数,被称为【生命周期钩子】—》让开发者可以在【特定阶段】运行自己的代码。
接下来展开讲讲这些生命周期函数:
-
beforeCreate(创建前):实例初始化后立即调用,此时数据观测(data)、事件/监听器( event /watcher )尚未设置,也就是说不能访问到data、computed、watch、methods上的方法和数据。
-
created(创建后) :实例创建完成,实例上配置的 options 包括 data、computed、watch、methods 等都配置完成,但DOM未挂载,所以不能访问到
$el
属性。
- 用途:适合数据初始化(如发起异步请求),但不可操作 DOM。
-
beforeMount(挂载前):模板已编译为虚拟 DOM,但尚未渲染到页面。此时
$el
是初始模板(如{{a}}
未解析)。无法操作渲染后的 DOM 元素。 -
虚拟DOM本质上是一个JavaScript对象,它是对真实DOM的抽象。虚拟DOM通过在内存中创建一个虚拟的DOM树,记录新旧树的差异(diff),然后将这些差异一次性更新到真实的DOM中。这样可以避免频繁的DOM操作,提高渲染效率。
-
mounted(挂载后):实例已挂载到真实 DOM,
$el
可访问,页面完成首次渲染。 -
用途:适合DOM 操作(如初始化第三方库)、异步请求依赖 DOM 的场景。
-
beforeUpdate(更新前):响应式数据更新时调用,数据已更新,但 DOM 尚未重新渲染(页面显示旧数据)。
-
updated(更新后) :虚拟 DOM 重新渲染并更新真实 DOM 后调用。
-
用途:可执行依赖新 DOM 的操作,但需避免在此修改数据(可能导致无限循环)。
-
beforeDestroy(销毁前):实例销毁之前调用。这一步,实例仍然完全可用,
this
仍能获取到实例,data
、methods
可访问。 -
用途:执行清理工作(如移除事件监听、取消定时器)。
-
destroyed(销毁后):实例销毁完成,所有绑定(数据、事件、子组件)已解除。无法再操作实例的属性和方法。
created和mounted的区别
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
三、keep-alive 的生命周期
keep-alive 是 Vue 提供的一个内置组件,用来对组件进行缓存——在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
如果为一个组件包裹了 keep-alive,那么它会多出两个生命周期:deactivated、actived。同时,beforeDestroy 和 destroyed 就不会再被触发了,因为组件不会被真正销毁。
- 当组件被换掉时,会被缓存到内存中,触发 deactivated 生命周期
- 当组件被切回来时,再去缓存里找这个组件,触发 activated 钩子函数
四、Vue2 与 Vue3 生命周期的区别
阶段 | Vue 2 钩子函数 | Vue 3 钩子函数(选项式) | Vue 3 Composition API 函数 |
---|---|---|---|
创建前 | beforeCreate | beforeCreate (不推荐使用) | 由 setup() 替代逻辑 |
创建后 | created | created (不推荐使用) | 由 setup() 替代逻辑 |
挂载前 | beforeMount | beforeMount | onBeforeMount |
挂载后 | mounted | mounted | onMounted |
更新前 | beforeUpdate | beforeUpdate | onBeforeUpdate |
更新后 | updated | updated | onUpdated |
销毁前 | beforeDestroy | beforeUnmount | onBeforeUnmount |
销毁后 | destroyed | unmounted | onUnmounted |
调试钩子 | 无 | 新增 renderTracked 、renderTriggered | onRenderTracked 、onRenderTriggered |
Vue3 的生命周期与 Vue2 的核心区别可概括为:
- 钩子函数名称调整(如销毁阶段
beforeDestroy
→beforeUnmount
) - 引入 Composition API 的
setup
替代beforeCreate
/created
,并新增调试钩子
相关文章:
Vue生命周期
一、Vue的生命周期及其阶段 Vue生命周期:一个Vue实例从 创建 到 销毁 的整个过程。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。 生命周期的四个阶段:① 创建 ② 挂…...
vue3数据双向绑定解析
Vue 3 的双向绑定原理主要基于 Proxy 和 Reflect,核心源码在 reactivity 模块中。 1. 核心模块:reactivity reactivity 模块负责响应式数据的实现,主要包括以下几个文件: reactive.ts:处理对象和数组的响应式。ref.t…...
Gemini 2.0 全面解析:技术突破、应用场景与竞争格局
摘要 2025年3月,谷歌正式发布Gemini 2.0大模型,凭借其在多模态处理、代码生成和长上下文理解等领域的突破性进展,迅速成为AI领域的焦点。本文将深入剖析Gemini 2.0的技术架构、应用场景及与Grok3、DeepSeek R1、ChatGPT-4.5等竞品的对比&…...
【Linux系统编程】管道
目录 1、什么是管道2、管道的种类3、数据的读写3.1、管道通信3.2、管道的命令实例: 4、无名管道4.1、pipe() 无名管道的创建示例:简单读写示例:加入进程示例:通过 管道(pipe) 实现 父子进程之间的双向通信 …...
LeeCode题库第643题
643.子数组最大平均数I 项目场景: 给你一个由 n 个元素组成的整数数组 nums 和一个整数 k 。 请你找出平均数最大且 长度为 k 的连续子数组,并输出该最大平均数。 任何误差小于 10-5 的答案都将被视为正确答案。 示例 1: 输入ÿ…...
数据炼丹与硬件互动:预测湿度的武学之道
前言 在这茫茫数据江湖中,高手过招,唯有融合机器学习与物联网之精髓,方能于风云变幻间自成一派。本文正是为各位江湖同道献上的秘籍,既有数据炼丹(预处理、模型训练)之奥义,也有硬件互通&#…...
【SpringBoot】MD5加盐算法的详解
目录 一、什么是加盐算法 二、如何实现加盐算法 2.1 加盐算法代码实现 2.2 注册页面中进行密码加盐 2.3 登录页面进行加盐的解密 2.4 注册和登录 一、什么是加盐算法 加盐算法是一种用于增强密码安全性的技术。这种技术通过在密码存储过程中添加一个随机生成的盐值&…...
IP风险度自检,互联网的安全“指南针”
IP地址就像我们的网络“身份证”,而IP风险度则是衡量这个“身份证”安全性的重要指标。它关乎着我们的隐私保护、账号安全以及网络体验,今天就让我们一起深入了解一下IP风险度。 什么是IP风险度 IP风险度是指一个IP地址可能暴露用户真实身份或被网络平台…...
如何手动使用下载并且运行 QwQ-32B-GGUF
首先使用安装 pip install ModelScope 使用 ModelScope 下载对应的模型 modelScope download --model Qwen/QwQ-32B-GGUF qwq-32b-q4_k_m.gguf 第二步开始下载 ollama git clone https://githubfast.com/ggerganov/llama.cpp # githubfast.com 可以加速下载 切换到目录&am…...
【实战ES】实战 Elasticsearch:快速上手与深度实践-附录-3-从ES 7.x到8.x的平滑迁移策略
👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 附录-版本升级指南 3-Elasticsearch 7.x 到 8.x 平滑迁移策略指南1. 升级必要性分析1.1 版本特性对比1.2 兼容性评估矩阵 2. 预升级准备清单2.1 环境检查表2.2 数据备份策略 3. 分阶段…...
IP 地址
文章目录 IP 地址IP 地址的分类IPv4 地址IPv6 地址 公有 IP 与私有 IP静态 IP 与动态 IP子网与子网掩码常见 IP 地址用途IP 地址的工作方式总结 IP 地址 IP(Internet Protocol)地址是计算机网络中的标识符,用于唯一标识网络中的设备。它可以…...
利用余弦相似度在大量文章中找出抄袭的文章
我前面的2篇文章分别讲了如果利用余弦相似度来判断2篇文章的相似度,来确定文章是否存在抄袭,和余弦相似度的原理,即余弦相似度到底是怎么来判断文章的相似性高低的等等。这一篇再说下,对于文章字数多和大量文章时,如果…...
《C语言中“输入魔法师”:scanf函数的奥秘与技巧》
🚀个人主页:fasdfdaslsfadasdadf 📖收入专栏:C语言 🌍文章目入 一、引言二、scanf函数的基本语法三、格式说明符的种类及用法(一)整数输入(二)浮点数输入(三&…...
VSTO(C#)Excel开发6:与窗体交互
初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github:codetoys,所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的,可以在任何平台上使用。 源码指引:github源…...
PCL 点云OBB包围盒(二)
文章目录 一、简介二、实现步骤二、实现代码三、实现效果参考资料一、简介 包围盒是一种求解离散点集最优包围空间的算法,基本思想是用体积稍大且特性简单的几何体(称为包围盒)来近似地代替复杂的几何对象。(来源于百度)常用的求解包围盒的算法主要有AABB和OOB算法,但AAB…...
IDEA 一键完成:打包 + 推送 + 部署docker镜像
1、本方案要解决场景? 想直接通过本地 IDEA 将最新的代码部署到远程服务器上。 2、本方案适用于什么样的项目? 项目是一个 Spring Boot 的 Java 项目。项目用 maven 进行管理。项目的运行基于 docker 容器(即项目将被打成 docker image&am…...
农业建设项目管理系统评测:8款推荐工具优缺点分析
本文主要介绍了以下8款农业建设项目管理系统:1.PingCode; 2. Worktile ;3. 建米农业工程项目管理系统;4. 开创云数字农业管理平台; 5. Trimble Ag Software;6.Conservis; 7. Agworld ࿱…...
【MySQL】表的约束(上)
文章目录 表的约束什么是表的约束空属性默认值列描述(comment)零填充(zerofill)主键 总结 表的约束 什么是表的约束 表的约束(Constraints)是数据库表中的规则,用于限制存储的数据,…...
根据TCP中的拥塞控制细说网卡了数据怎么传输
TCP(传输控制协议)中的拥塞控制是确保网络在数据传输过程中不会发生过载并导致网络崩溃的机制。拥塞控制通过动态地调整发送方的数据传输速率来适应网络的负载,从而避免网络拥塞。TCP的拥塞控制主要是根据网络的状况自动调整其发送速率&#…...
【SpringMVC】入门版
1.基本概念 1.1三层架构 三层架构也就是我们常说的b/s架构中的表现层,业务层和持久层,每层都各司其职,下面来分别讲解这三层的作用。 表现层: 也就是我们常说的web层。它负责接收客户端的请求,向客户端响应结果,通…...
DAY33 贪心算法Ⅱ
122. 买卖股票的最佳时机 II - 力扣(LeetCode) 想到把整体利润分解为每天的利润,就豁然开朗了。 class Solution { public:int maxProfit(vector<int>& prices) {int result0;for(int i1;i<prices.size();i){resultmax(0,pric…...
re-二维四向迷宫题
关于迷宫 我们结合具体的来进行描述。 迷宫,顾名思义是有墙,且只有一条路可以走下去。当我们在题目中获得了map(地图)就拥有了上帝视角,就可以顺利的走出迷宫。 在下面这个图就是一个迷宫的map,其中A是起…...
并发编程面试题一
1、什么是进程、线程、协程,他们之间的关系是怎样的 进程是操作系统进行资源分配和调度的基本单位。每个进程都有独立的内存空间,进程之间相互独立,一个进程崩溃不会影响其他进程,进程间通信(IPC)需要通过…...
3.14周报
本周主要是在找双目视觉三维人体姿态估计方向的文章,这篇dual-diffusion,双目三维人体姿态估计的双扩散文章,引起了兴趣,作者从由于摄像机数量的减少,增加了3d重建的不确定性入手,然后使用了扩散模型&#…...
【redis】zset 类型:基本命令(上)
set 集合: 唯一无序。(顺序不重要)孙行者、行者孙>同一只猴 list 有序。(顺序很重要)孙行者、行者孙>不同的猴 zset 有序。升序/降序 有序集合 排序的规则是什么? 给 zset 中的 member 引入了…...
3分钟复现 Manus 超强开源项目 OpenManus
文章目录 前言什么是 OpenManus构建方式环境准备克隆代码仓库安装依赖配置 LLM API运行 OpenManus 效果演示总结个人简介 前言 近期人工智能领域迎来了一位备受瞩目的新星——Manus。Manus 能够独立执行复杂的现实任务,无需人工干预。由于限制原因大部分人无法体验…...
【Java篇】一法不变,万象归一:方法封装与递归的思想之道
文章目录 Java 方法的使用:从基础到递归的全面解析一、方法的概念及使用1.1 什么是方法 (method)?1.2 方法定义1.3 方法调用的执行过程1.4 实参和形参的关系1.5 没有返回值的方法 二、方法重载2.1 为什么需要方法重载2.2 方法重载的概念2.2.4 C 和 Java 的比较&…...
SpringBoot解决跨域
将这个类添加到项目中 ResponseAdvice.java package com.example.homeLearn.config;import org.springframework.core.MethodParameter; import org.springframework.http.MediaType; import org.springframework.http.server.ServerHttpRequest; import org.springframework…...
【实战ES】实战 Elasticsearch:快速上手与深度实践-附录-2-性能调优工具箱
👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 附录-性能调优工具箱 2-Elasticsearch 性能调优工具箱深度指南一、性能诊断工具集1.1 实时监控工具1.2 慢查询分析 二、硬件与基础架构优化2.1 存储方案选型2.2 JVM调优参数 三、索引…...
UDP协议栈之整体架构处理
在之前的章节中,笔者就UDP、ICMP、IP、ARP、MAC层的报文格式,以及组帧解帧、CRC校验、分片处理等操作进行了具体介绍以及详细代码实现,并且通过了仿真测试。但之前的仿真测试都是对单层报文的组帧解帧进行的,这些模块仍处于“孤立…...
健康医疗:动态代理 IP 保障医疗数据安全,提升远程医疗服务质量!
在数字化浪潮的推动下,远程医疗服务以其便捷性和高效性受到了广泛的关注。然而,随之而来的是数据安全问题,尤其是医疗数据的安全性,成为了制约远程医疗服务发展的关键因素。幸运的是,动态代理IP技术的出现,…...
Navicat SqlServer 设置自增主键
Navicat是一款优秀的数据库管理工具,可以连接很多类型的数据库。使用它可以极大的提高工作效率。 Navicat 不能设置SqlServer自增字段,只能通过sql语句来实现 建表时设置 create table <表名> ( <字段1-主键> int identity (1,1) primar…...
实验8 搜索技术
实验8 搜索技术 一、实验目的 (1)掌握搜索技术的相关理论,能根据实际情况选取合适的搜索方法; (2)进一步熟悉盲目搜索技术,掌握其在搜索过程中的优缺点; (3)…...
IMA+DeepSeekR1+本地知识库撰写NOIP2008普及组T3【传球游戏】题解
目录 一、提问词 二、DeepSeekR1回复 题目描述 解题思路 实现代码 代码说明 三、说明 【IMADeepSeekR1本地知识库】撰写NOIP2008普及组复赛题解系列 1、IMADeepSeekR1本地知识库撰写NOIP2008普及组T1【ISBN 号码】题解-CSDN博客 2、IMADeepSeekR1本地知识库撰写NOIP200…...
查找特定的值(信息学奥赛一本通-1110)
【题目描述】 在一个序列(下标从1开始)中查找一个给定的值,输出第一次出现的位置。 【输入】 第一行包含一个正整数n,表示序列中元素个数。1 <n< 10000。 第二行包含n个整数,依次给出序列的每个元素,相邻两个整数之间用单个…...
Qt项目中集成第三方模块的.pri文件
对于功能模块较多的Qt项目,使用pri文件管理模块文件,降低工程复杂度,提高软件模块的封装性和重用性。 一、.pro与.pri 对于模块化编程,Qt提供了pro和pri,pro管理项目,pri管理模块。 .pro 文件是Qt项目的…...
200多种算法应用于二维和三维无线传感器网络(WSN)覆盖场景
2.1 二元感知模型 在当前无线传感器网络(WSN)覆盖场景中,最常见且理想的感知模型是二元感知模型[27]。如图2所示, Q 1 Q_1 Q1和 Q 2 Q_2 Q2代表平面区域内的两个随机点。 Q 1 Q_1 Q1位于传感器的检测区域内,其感…...
【QT】文件系统相关 -- QFile
一、Qt 文件概述 🔥 文件操作是应用程序必不可少的部分。Qt 作为⼀个通用开发库,提供了跨平台的文件操作能力。Qt 提供了很多关于⽂件的类,通过这些类能够对文件系统进行操作,如文件读写、文件信息获取、文件制或重命名等 二、输…...
transformer bert 多头自注意力
输入的(a1,a2,a3,a4)是最终嵌入,是一个(512,768)的矩阵;而a1是一个token,尺寸是768 a1通过Wq权重矩阵,经过全连接变换得到查询向量q1;a2通过Wk权重矩阵得到键向量k2;q和k点乘就是值…...
人工智能之数学基础:线性变换的象空间和零空间
本文重点 前面的课程中,我们学习了线性变换,由此而引申出线性变换的象空间和零空间,这两个空间在机器学习领域会被经常用到,本文对此进行学习。 直观理解 总的来说象空间就是经过线性变换得到的空间,零空间就是经过线性变换是零的元素构成的空间。 从几何角度来看,象空…...
数据的存储---整型、浮点型
目录 一、整型在内存中的存储 1. 原码、反码、补码 2. 大端与小端 二、浮点数在内存中的存储 1.浮点数的存 2. 浮点数的取 3. 题目解析 一个变量的创建需要在内存中开辟空间,而开辟的空间大小是由数据类型决定的。下面我们就来讨论一下整型、浮点型在内存中的…...
鲸鱼算法WOA对风电场风电机组一次二次调频参数进行全局最优辨识,二次调频参数辩识matlab/simulink,也可进一步修改成一次调频参数辩识
模型为二次调频模型,也可修改为一次调频模型参数辩识 随着风电在电力系统中占比提高,其调频特性对电力系统频率稳定性的影响增大,例如,随着风电渗透水平不断提升,系统惯量不断增加,电力系统频率不断下降,在…...
Spring 中 SmartInitializingSingleton 的作用和示例
一、 接口定义 SmartInitializingSingleton 是 Spring 框架提供的一个 单例 Bean 全局初始化回调接口,用于在 所有非延迟单例 Bean 初始化完成后 执行自定义逻辑。 核心方法: public interface SmartInitializingSingleton {void afterSingletonsInsta…...
《TCP/IP网络编程》学习笔记 | Chapter 18:多线程服务器端的实现
《TCP/IP网络编程》学习笔记 | Chapter 18:多线程服务器端的实现 《TCP/IP网络编程》学习笔记 | Chapter 18:多线程服务器端的实现线程的概念引入线程的背景线程与进程的区别 线程创建与运行pthread_createpthread_join可在临界区内调用的函数工作&#…...
Unity AI 技术浅析(三):智能代理(Agents)
Unity AI的智能代理(Agents)技术是实现游戏和虚拟现实应用中非玩家角色(NPC)、敌人、盟友等智能行为的核心。通过智能代理,开发者可以为虚拟角色赋予感知、决策和行动的能力,使其能够与环境和其他角色进行复杂的交互。 一、智能代理的基本原理 智能代理是能够在特定环境…...
加油站~~
求最少加油次数就是一个贪心问题,这里也不需要证明,根据我们的常识也知道就是走到油不够的时候就加油就好了,这里的no solution这有在两个加油站之间的距离大于了加满油后的行驶距离才会存在,其他情况都是可以计算的。代码有很多细…...
【商城实战(24)】商城性能大揭秘:压力测试与性能监控实战
【商城实战】专栏重磅来袭!这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建,运用 uniapp、Element Plus、SpringBoot 搭建商城框架,到用户、商品、订单等核心模块开发,再到性能优化、安全加固、多端适配…...
Linly-Talker:开源数字人框架的技术解析与影响
一、引言:AI 数字人的发展趋势 近年来,数字人(Digital Human) 技术迅速发展,从最早的 2D 虚拟主播,到如今能够进行实时交互的 3D 智能助手,AI 在多模态交互领域的应用愈发广泛。各大互联网公司…...
【Nexus】Maven 私服搭建以及上传自己的Jar包
Nexus 安装 docker run -d -uroot --name nexus3 --restartalways -p 8081:8081 -v /data/nexus-data/blobs:/nexus-data/blobs -v /etc/localtime:/etc/localtime sonatype/nexus3这里也提供一下docker-composer的方法 .env 文件 VERSIONlatest CONTAINER_NAMECONTAINER_N…...
wlwrap 与 rlwrap 的区别对比:图形显示协议的演变
在 Linux 系统中,许多工具和程序依赖于命令行界面(CLI)来进行交互,尤其是对于那些没有图形用户界面的应用程序。在这种情况下,命令行编辑、历史记录和自动补全等功能是提升工作效率和用户体验的关键。rlwrap 和 wlwrap…...