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…...
python打卡day49
知识点回顾: 通道注意力模块复习空间注意力模块CBAM的定义 作业:尝试对今天的模型检查参数数目,并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
Zustand 状态管理库:极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库,特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...
