vue基础(五)
Vue 实例在创建、挂载、更新、销毁的过程中会触发一系列的生命周期钩子(Lifecycle Hooks),让开发者可以在不同阶段执行逻辑。
1. Vue 2 生命周期完整流程
生命周期的四个主要阶段
- 创建阶段(Creation)
- 挂载阶段(Mounting)
- 更新阶段(Updating)
- 销毁阶段(Destruction)
2. Vue 2 生命周期钩子(Hooks)
| 阶段 | 生命周期钩子 | 作用 |
|---|---|---|
| 创建前 | beforeCreate | 组件刚创建,还没有 data、methods、computed 等 |
| 创建后 | created | data、methods 已初始化,但 DOM 还未渲染 |
| 挂载前 | beforeMount | template 解析完毕,还未挂载到真实 DOM 上 |
| 挂载后 | mounted | 组件挂载到 DOM,可以操作 DOM |
| 更新前 | beforeUpdate | data 变化,DOM 还未更新 |
| 更新后 | updated | data 变化,DOM 已更新 |
| 销毁前 | beforeDestroy | 组件即将销毁,可清理定时器、解绑事件 |
| 销毁后 | destroyed | 组件已销毁,所有子组件也被销毁 |
3. Vue 2 生命周期示例
<template><div><h1>{{ message }}</h1><button @click="changeMessage">修改消息</button></div>
</template><script>
export default {data() {return {message: "Hello Vue!"};},methods: {changeMessage() {this.message = "Vue 生命周期演示";}},beforeCreate() {console.log("1. beforeCreate - data 还未初始化", this.message); // undefined},created() {console.log("2. created - data 初始化完成", this.message);},beforeMount() {console.log("3. beforeMount - 模板编译完成,尚未挂载");},mounted() {console.log("4. mounted - 组件已挂载到 DOM,可进行 DOM 操作");},beforeUpdate() {console.log("5. beforeUpdate - data 变化,DOM 还未更新", this.message);},updated() {console.log("6. updated - data 变化,DOM 已更新", this.message);},beforeDestroy() {console.log("7. beforeDestroy - 组件即将销毁,可清理定时器等");},destroyed() {console.log("8. destroyed - 组件已销毁");}
};
</script>
4. Vue 3 生命周期
Vue 3 依然有生命周期钩子,但使用 setup() 时需要使用 Vue 3 提供的 onXxx 形式的钩子(从 vue 引入)。
Vue 3 生命周期对比
| Vue 2 | Vue 3 (Composition API) |
|---|---|
beforeCreate | setup() 直接初始化 |
created | setup() 直接初始化 |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeDestroy | onBeforeUnmount |
destroyed | onUnmounted |
Vue 3 生命周期示例
<template><div><h1>{{ message }}</h1><button @click="changeMessage">修改消息</button></div>
</template><script>
import { ref, onMounted, onBeforeUnmount, onUpdated } from "vue";export default {setup() {const message = ref("Hello Vue 3!");const changeMessage = () => {message.value = "Vue 3 生命周期演示";};onMounted(() => {console.log("组件已挂载");});onUpdated(() => {console.log("组件更新了");});onBeforeUnmount(() => {console.log("组件即将销毁");});return { message, changeMessage };}
};
</script>
5. 生命周期使用场景
| 钩子 | 适用场景 |
|---|---|
beforeCreate | 组件初始化前,可用于 console.log 调试 |
created | 获取 data,初始化 Vuex,发起 Ajax 请求 |
beforeMount | 在 DOM 渲染前执行一些逻辑 |
mounted | 获取 DOM,初始化 第三方库(如 ECharts) |
beforeUpdate | data 变化时,执行一些更新前的计算 |
updated | DOM 更新后执行操作(如日志记录) |
beforeDestroy | 清除 setInterval、解绑 window 事件 |
destroyed | 组件销毁后的清理操作 |
6. Vue 生命周期面试题
Q1: created 和 mounted 有什么区别?
| 钩子 | 执行时机 | 适用场景 |
|---|---|---|
created | 组件实例创建完成,但 DOM 还未渲染 | 可用于获取 data、调用 Vuex |
mounted | 组件挂载到 DOM 后 | 适用于 DOM 操作,如 ECharts |
📌 如果要操作 DOM,需要在 mounted 中进行。
Q2: beforeDestroy 用来做什么?
beforeDestroy 适用于:
- 清除定时器
- 解绑全局事件
- 销毁第三方库
beforeDestroy() {clearInterval(this.timer); // 清除定时器window.removeEventListener("resize", this.handleResize); // 解绑事件
}
相关文章:
vue基础(五)
Vue 实例在创建、挂载、更新、销毁的过程中会触发一系列的生命周期钩子(Lifecycle Hooks),让开发者可以在不同阶段执行逻辑。 1. Vue 2 生命周期完整流程 生命周期的四个主要阶段 创建阶段(Creation)挂载阶段&#…...
MySQL的深度分页如何优化?
大家好,我是锋哥。今天分享关于【MySQL的深度分页如何优化?】面试题。希望对大家有帮助; MySQL的深度分页如何优化? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 MySQL的深度分页(即跳过大量数据后进行分…...
深度学习每周学习总结R6(RNN实现阿尔茨海默病诊断)
🍨 本文为🔗365天深度学习训练营 中的学习记录博客R8中的内容,为了便于自己整理总结起名为R6🍖 原作者:K同学啊 | 接辅导、项目定制 目录 0. 总结1. 数据集介绍2. 数据预处理3. 模型构建4. 初始化模型及优化器5. 训练函…...
Node.js 多模态图像描述服务 调用siliconflow:现代 JavaScript 实践
Node.js 多模态图像描述服务:现代 JavaScript 实践 项目背景 本项目使用 Node.js 和 TypeScript 实现一个高性能的图像描述微服务,展示 JavaScript 在多模态 AI 应用中的强大能力。 技术栈 Node.jsTypeScriptExpress.jsOpenAI APIdotenvRxJS (可选&a…...
机器学习数学基础:21.特征值与特征向量
一、引言 在现代科学与工程的众多领域中,线性代数扮演着举足轻重的角色。其中,特征值、特征向量以及相似对角化的概念和方法,不仅是线性代数理论体系的核心部分,更是解决实际问题的有力工具。无论是在物理学中描述系统的振动模式…...
【目标检测json2txt】label从COCO格式json文件转YOLO格式txt文件
目录 🍀🍀1.COCO格式json文件 🌷🌷2.YOLO格式txt文件 💖💖3.xml2json代码(python) 🐸🐸4.输入输出展示 🙋🙋4.1输入json 🍂🍂4.2输出txt 整理不易,欢迎一键三连!!! 送你们一条美丽的--分割线-- 🍀🍀1.COCO格式json文件 COCO数…...
强化学习之 PPO 算法:原理、实现与案例深度剖析
目录 一、引言二、PPO 算法原理2.1 策略梯度2.2 PPO 核心思想 三、PPO 算法公式推导3.1 重要性采样3.2 优势函数估计 四、PPO 算法代码实现(以 Python 和 PyTorch 为例)五、PPO 算法案例应用5.1 机器人控制5.2 自动驾驶 六、总结 一、引言 强化学习作为…...
vue-点击生成动态值,动态渲染回显输入框
1.前言 动态点击生成数值,回显输入框,并绑定。 2.实现 <template><div style"display:flex;align-items: center;flex-direction:row"><a-input:key"inputKey"v-model"uploadData[peo.field]"placehold…...
高性能 :OpenAI Triton Open-source GPU programming Language LINUX 环境配置
目录 配置triton环境cudabuild-essential带有pip的python环境直接安装pipanaconda 安装 triton 环境pip install tritonpip install torch 运行test示例vector-add.pylaunch.json 配置triton环境 cuda wget http://developer.download.nvidia.com/compute/cuda/11.0.2/local_…...
TCP 端口号为何位于首部前四个字节?协议设计的智慧与启示
知乎的一个问题很有意思:“为什么在TCP首部中要把TCP的端口号放入最开始的四个字节?” 这种问题很适合我这种搞历史的人,大年初一我给出了一个简短的解释,但仔细探究这个问题,我们将会获得 TCP/IP 被定义的过程。 文…...
HTML之JavaScript函数声明
HTML之JavaScript函数声明 1. function 函数名(){}2. var 函数名 function(){}<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1…...
R 数组:高效数据处理的基础
R 数组:高效数据处理的基础 引言 在数据科学和统计分析领域,R 语言以其强大的数据处理和分析能力而备受推崇。R 数组是 R 语言中用于存储和操作数据的基本数据结构。本文将详细介绍 R 数组的创建、操作和优化,帮助读者掌握 R 数组的使用技巧…...
git服务器搭建,gitea服务搭建,使用systemclt管理服务
文章目录 页面展示使用二进制文件安装git服务下载选择架构使用wget下载安装 验证 GPG 签名服务器设置准备环境创建systemctl文件 备份与恢复备份命令 (dump)恢复命令 (restore) 页面展示 使用二进制文件安装git服务 所有打包的二进制程序均包含 SQLite,MySQL 和 Po…...
Pdf手册阅读(1)--数字签名篇
原文阅读摘要 PDF支持的数字签名, 不仅仅是公私钥签名,还可以是指纹、手写、虹膜等生物识别签名。PDF签名的计算方式,可以基于字节范围进行计算,也可以基于Pdf 对象(pdf object)进行计算。 PDF文件可能包…...
嵌入式WebRTC压缩至670K,目标将so动态库压缩至500K,.a静态库还可以更小
最近把EasyRTC的效果发布出去给各大IPC厂商体验了一下,直接就用EasyRTC与各个厂商的负责人进行的通话,在通话中,用户就反馈效果确实不错! 这两天有用户要在海思hi3516cv610上使用EasyRTC,工具链是:gcc-2024…...
百度高德地图坐标转换
百度地图和高德地图的侧重点不太一样。同样一个地名,在百度地图网站上搜索到的地点可能是商业网点,在高德地图网站上搜索到的地点可能是自然行政地点。 高德地图api 在高德地图中,搜索地名,如“乱石头川”,该地名会出…...
ES 索引结构
ES 既不像 MySQL 这样有严格的 Schema,也不像 MongoDB 那样完全无 Schema,而是介于两者之间。 1️⃣ ES 的 Schema 模式 ES 默认是 Schema-less(无模式) 的,允许动态添加字段。 但 ES 也支持 Schema(映射 …...
HPM_SDK应用本地化——基于6750evkmini
文章目录 前言一、准备工作1、下载官方的SDK2、解压SDK 二、实操1、新建目标工程文件夹2、回到SDK中将相关文件复制1、Borad文件夹2、hello_world文件夹 三、实验现象总结 前言 为什么要对sdk进行应用本地化?在嵌入式开发中我们一般将官方提供的SDK作为参考&#x…...
【deepseek-r1本地部署】
首先需要安装ollama,之前已经安装过了,这里不展示细节 在cmd中输入官网安装命令:ollama run deepseek-r1:32b,开始下载 出现success后,下载完成 接下来就可以使用了,不过是用cmd来运行使用 可以安装UI可视化界面&a…...
查询语句来提取 detail 字段中包含 xxx 的 URL 里的 commodity/ 后面的数字串
您可以使用以下 SQL 查询语句来提取 detail 字段中包含 oss.kxlist.com 的 URL 里的 commodity/ 后面的数字串: <p><img style"max-width:100%;" src"https://oss.kxlist.com//8a989a0c55e4a7900155e7fd7971000b/commodity/20170925/20170…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer (1)资源 论文&a…...
STM32---外部32.768K晶振(LSE)无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容(CL)与匹配电容(CL1、CL2)的关系 2. 如何选择 CL1 和 CL…...
PHP 8.5 即将发布:管道操作符、强力调试
前不久,PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5!作为 PHP 语言的又一次重要迭代,PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是,借助强大的本地开发环境 ServBay&am…...
深入浅出Diffusion模型:从原理到实践的全方位教程
I. 引言:生成式AI的黎明 – Diffusion模型是什么? 近年来,生成式人工智能(Generative AI)领域取得了爆炸性的进展,模型能够根据简单的文本提示创作出逼真的图像、连贯的文本,乃至更多令人惊叹的…...
