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

vue基础(五)

Vue 实例在创建、挂载、更新、销毁的过程中会触发一系列的生命周期钩子(Lifecycle Hooks),让开发者可以在不同阶段执行逻辑。

1. Vue 2 生命周期完整流程

生命周期的四个主要阶段

  1. 创建阶段(Creation)
  2. 挂载阶段(Mounting)
  3. 更新阶段(Updating)
  4. 销毁阶段(Destruction)

2. Vue 2 生命周期钩子(Hooks)

阶段生命周期钩子作用
创建前beforeCreate组件刚创建,还没有 datamethodscomputed
创建后createddatamethods 已初始化,但 DOM 还未渲染
挂载前beforeMounttemplate 解析完毕,还未挂载到真实 DOM
挂载后mounted组件挂载到 DOM,可以操作 DOM
更新前beforeUpdatedata 变化,DOM 还未更新
更新后updateddata 变化,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 2Vue 3 (Composition API)
beforeCreatesetup() 直接初始化
createdsetup() 直接初始化
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeDestroyonBeforeUnmount
destroyedonUnmounted

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 请求
beforeMountDOM 渲染前执行一些逻辑
mounted获取 DOM,初始化 第三方库(如 ECharts
beforeUpdatedata 变化时,执行一些更新前的计算
updatedDOM 更新后执行操作(如日志记录)
beforeDestroy清除 setInterval、解绑 window 事件
destroyed组件销毁后的清理操作

6. Vue 生命周期面试题

Q1: createdmounted 有什么区别?

钩子执行时机适用场景
created组件实例创建完成,但 DOM 还未渲染可用于获取 data、调用 Vuex
mounted组件挂载到 DOM适用于 DOM 操作,如 ECharts

📌 如果要操作 DOM,需要在 mounted 中进行。

Q2: beforeDestroy 用来做什么?

beforeDestroy 适用于:

  • 清除定时器
  • 解绑全局事件
  • 销毁第三方库
beforeDestroy() {clearInterval(this.timer); // 清除定时器window.removeEventListener("resize", this.handleResize); // 解绑事件
}

相关文章:

vue基础(五)

Vue 实例在创建、挂载、更新、销毁的过程中会触发一系列的生命周期钩子&#xff08;Lifecycle Hooks&#xff09;&#xff0c;让开发者可以在不同阶段执行逻辑。 1. Vue 2 生命周期完整流程 生命周期的四个主要阶段 创建阶段&#xff08;Creation&#xff09;挂载阶段&#…...

MySQL的深度分页如何优化?

大家好&#xff0c;我是锋哥。今天分享关于【MySQL的深度分页如何优化&#xff1f;】面试题。希望对大家有帮助&#xff1b; MySQL的深度分页如何优化&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 MySQL的深度分页&#xff08;即跳过大量数据后进行分…...

深度学习每周学习总结R6(RNN实现阿尔茨海默病诊断)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客R8中的内容&#xff0c;为了便于自己整理总结起名为R6&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 目录 0. 总结1. 数据集介绍2. 数据预处理3. 模型构建4. 初始化模型及优化器5. 训练函…...

Node.js 多模态图像描述服务 调用siliconflow:现代 JavaScript 实践

Node.js 多模态图像描述服务&#xff1a;现代 JavaScript 实践 项目背景 本项目使用 Node.js 和 TypeScript 实现一个高性能的图像描述微服务&#xff0c;展示 JavaScript 在多模态 AI 应用中的强大能力。 技术栈 Node.jsTypeScriptExpress.jsOpenAI APIdotenvRxJS (可选&a…...

机器学习数学基础:21.特征值与特征向量

一、引言 在现代科学与工程的众多领域中&#xff0c;线性代数扮演着举足轻重的角色。其中&#xff0c;特征值、特征向量以及相似对角化的概念和方法&#xff0c;不仅是线性代数理论体系的核心部分&#xff0c;更是解决实际问题的有力工具。无论是在物理学中描述系统的振动模式…...

【目标检测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 算法代码实现&#xff08;以 Python 和 PyTorch 为例&#xff09;五、PPO 算法案例应用5.1 机器人控制5.2 自动驾驶 六、总结 一、引言 强化学习作为…...

vue-点击生成动态值,动态渲染回显输入框

1.前言 动态点击生成数值&#xff0c;回显输入框&#xff0c;并绑定。 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 端口号为何位于首部前四个字节?协议设计的智慧与启示

知乎的一个问题很有意思&#xff1a;“为什么在TCP首部中要把TCP的端口号放入最开始的四个字节&#xff1f;” 这种问题很适合我这种搞历史的人&#xff0c;大年初一我给出了一个简短的解释&#xff0c;但仔细探究这个问题&#xff0c;我们将会获得 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 数组&#xff1a;高效数据处理的基础 引言 在数据科学和统计分析领域&#xff0c;R 语言以其强大的数据处理和分析能力而备受推崇。R 数组是 R 语言中用于存储和操作数据的基本数据结构。本文将详细介绍 R 数组的创建、操作和优化&#xff0c;帮助读者掌握 R 数组的使用技巧…...

git服务器搭建,gitea服务搭建,使用systemclt管理服务

文章目录 页面展示使用二进制文件安装git服务下载选择架构使用wget下载安装 验证 GPG 签名服务器设置准备环境创建systemctl文件 备份与恢复备份命令 (dump)恢复命令 (restore) 页面展示 使用二进制文件安装git服务 所有打包的二进制程序均包含 SQLite&#xff0c;MySQL 和 Po…...

Pdf手册阅读(1)--数字签名篇

原文阅读摘要 PDF支持的数字签名&#xff0c; 不仅仅是公私钥签名&#xff0c;还可以是指纹、手写、虹膜等生物识别签名。PDF签名的计算方式&#xff0c;可以基于字节范围进行计算&#xff0c;也可以基于Pdf 对象&#xff08;pdf object&#xff09;进行计算。 PDF文件可能包…...

嵌入式WebRTC压缩至670K,目标将so动态库压缩至500K,.a静态库还可以更小

最近把EasyRTC的效果发布出去给各大IPC厂商体验了一下&#xff0c;直接就用EasyRTC与各个厂商的负责人进行的通话&#xff0c;在通话中&#xff0c;用户就反馈效果确实不错&#xff01; 这两天有用户要在海思hi3516cv610上使用EasyRTC&#xff0c;工具链是&#xff1a;gcc-2024…...

百度高德地图坐标转换

百度地图和高德地图的侧重点不太一样。同样一个地名&#xff0c;在百度地图网站上搜索到的地点可能是商业网点&#xff0c;在高德地图网站上搜索到的地点可能是自然行政地点。 高德地图api 在高德地图中&#xff0c;搜索地名&#xff0c;如“乱石头川”&#xff0c;该地名会出…...

ES 索引结构

ES 既不像 MySQL 这样有严格的 Schema&#xff0c;也不像 MongoDB 那样完全无 Schema&#xff0c;而是介于两者之间。 1️⃣ ES 的 Schema 模式 ES 默认是 Schema-less&#xff08;无模式&#xff09; 的&#xff0c;允许动态添加字段。 但 ES 也支持 Schema&#xff08;映射 …...

HPM_SDK应用本地化——基于6750evkmini

文章目录 前言一、准备工作1、下载官方的SDK2、解压SDK 二、实操1、新建目标工程文件夹2、回到SDK中将相关文件复制1、Borad文件夹2、hello_world文件夹 三、实验现象总结 前言 为什么要对sdk进行应用本地化&#xff1f;在嵌入式开发中我们一般将官方提供的SDK作为参考&#x…...

【deepseek-r1本地部署】

首先需要安装ollama,之前已经安装过了&#xff0c;这里不展示细节 在cmd中输入官网安装命令&#xff1a;ollama run deepseek-r1:32b&#xff0c;开始下载 出现success后&#xff0c;下载完成 接下来就可以使用了&#xff0c;不过是用cmd来运行使用 可以安装UI可视化界面&a…...

查询语句来提取 detail 字段中包含 xxx 的 URL 里的 commodity/ 后面的数字串

您可以使用以下 SQL 查询语句来提取 detail 字段中包含 oss.kxlist.com 的 URL 里的 commodity/ 后面的数字串&#xff1a; <p><img style"max-width:100%;" src"https://oss.kxlist.com//8a989a0c55e4a7900155e7fd7971000b/commodity/20170925/20170…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...