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

vue生命周期及其作用

news 来源：原创 2025/5/14 15:05:27

vue生命周期及其作用

1. 生命周期总览

在这里插入图片描述

2. beforeCreate

  • 我们在new Vue()时，初始化一个Vue空的实例对象，此时对象身上只有默认的声明周期函数和事件，此时data,methods都未被初始化

3. created

  • 此时，已经完成数据观测，属性和方法的运算，watch、event事件回调的配置
  • 可以调用methods中的的方法，访问和修改data数据出发响应式渲染dom，可以通过compute和watch完成数据计算
  • 此时，vm.$el并没有被创建

4. created->beforeMounted

  • 判断是否存在el选项，如果不存在，则停止编译，直到调用vm.$mount（el）才会继续编译
  • vm.el获取到的事挂载DOM的

5. beforeMount

  • 此时可以获取到vm.el
  • vm.el已完成DOM初始化，但未挂载到el选项上

6. beforeMount->Mounted

  • 此阶段vm.el完成挂载，vm.￥el生成的DOM替换了el选项所对应的DOM

7. Mounted

  • vm.el已完成DOM的挂载和渲染，

8. beforeUpdate

  • 更新的数据必须是被渲染在模板上的
  • 此时view层还没有更新

9. updated

  • 完成view层的更新

10. beforeDestroy

  • 实例被销毁前调用，此时实例属性与方法仍可访问

11. destroyed

  • 完全销毁一个实例，仅销毁实例，并不能清楚DOM

12. 总结

生命周期描述
beforeCreate执行时组件实例还未被创建，可用于插件开发中执行一些初始化任务
created组件初始化完毕，各种数据可以使用，常用于异步数据获取
beforeMount未执行渲染、更新，dom未创建
mounted初始化结束，DOM已经创建，可用于获取访问数据和DOM元素
beforeUpdate更新前，可用于获取更新前各种状态
updated更新后，所有状态意识最新
beforeDestroy销毁前，可用于一些定时器清楚或者订阅的取消
destroyed组件已销毁

13. created和mounted数据请求的区别

  • created是在实例创建完成之后立刻调用，这时候dom节点未生成，如果进行数据请求，后续在mounted时就一次性渲染结束
  • mounted是在dom挂载完立刻执行，这时候如果再进行数据请求，可能会发生回流和重绘，页面会闪动
  • 所以，数据请求一般放在created中

相关文章：

vue生命周期及其作用

vue生命周期及其作用 1. 生命周期总览 2. beforeCreate 我们在new Vue()时，初始化一个Vue空的实例对象，此时对象身上只有默认的声明周期函数和事件，此时data,methods都未被初始化 3. created 此时，已经完成数据观测&#xff0…...

编程日记 2025/5/14 15:05:27

数据分析师使用Kutools for Excel 插件

数据分析师使用Kutools for Excel 插件 Kutools for Excel 是一款功能强大的 Excel 插件，旨在提高 Excel 用户的工作效率，简化复杂的操作。它提供了超过 300 个增强功能，帮助用户快速完成数据管理、格式化、排序、分析等任务，特别…...

编程日记 2025/5/9 14:26:59

毫秒级响应的VoIP中的系统组合推荐

在高并发、低延迟、毫秒级响应的 VoIP 场景中，选择合适的操作系统组合至关重要。以下是针对 Ubuntu linux-lowlatency、CentOS Stream kernel-rt 和 Debian 自定义 PREEMPT_RT 的详细对比及推荐： 1. 系统组合对比 特性Ubuntu linux-lowlatencyCentO…...

编程日记 2025/5/12 6:30:49

unordered_map/set的哈希封装

【C笔记】unordered_map/set的哈希封装 🔥个人主页：大白的编程日记 🔥专栏：C笔记 文章目录 【C笔记】unordered_map/set的哈希封装前言一. 源码及框架分析二.迭代器三.operator[]四.使用哈希表封装unordered_map/set后言 前言 哈…...

编程日记 2025/5/14 14:56:45

表格标签的使用

一.表格标签 1.1表格标签的作用 用来显示和展示数据&#xff0c;不是用来布局页面的。 1.2表格的基本语法 <table> //用于定义表格标签 <tr> // table row 用于定义表格中的行&#xff0c;必须嵌套在<table> </table>标签中 <td>单元格内的文…...

编程日记 2025/4/9 15:52:04

python算法和数据结构刷题[5]：动态规划

动态规划&#xff08;Dynamic Programming, DP&#xff09;是一种算法思想&#xff0c;用于解决具有最优子结构的问题。它通过将大问题分解为小问题&#xff0c;并找到这些小问题的最优解&#xff0c;从而得到整个问题的最优解。动态规划与分治法相似&#xff0c;但区别在于动态…...

编程日记 2025/5/14 12:03:32

【cocos creator】【模拟经营】餐厅经营demo

下载&#xff1a;【cocos creator】模拟经营餐厅经营...

编程日记 2025/5/12 20:49:31

编程AI深度实战：给vim装上AI

系列文章&#xff1a; 编程AI深度实战&#xff1a;私有模型deep seek r1&#xff0c;必会ollama-CSDN博客 编程AI深度实战&#xff1a;自己的AI&#xff0c;必会LangChain-CSDN博客 编程AI深度实战&#xff1a;给vim装上AI-CSDN博客 编程AI深度实战&#xff1a;火的编程AI&…...

编程日记 2025/5/13 7:58:04

信息学奥赛一本通 2088：【22CSPJ普及组】逻辑表达式(expr) | 洛谷 P8815 [CSP-J 2022] 逻辑表达式

【题目链接】 ybt 2088&#xff1a;【22CSPJ普及组】逻辑表达式(expr) 洛谷 P8815 [CSP-J 2022] 逻辑表达式 【题目考点】 1. 表达式树&#xff1a;中缀表达式建树 可以看该问题信息学奥赛一本通 1356&#xff1a;计算(calc) 了解中缀表达式建树过程。 【解题思路】 解法…...

编程日记 2025/5/13 3:19:15

Linux系统管理

文章目录 一、进程与服务二、systemctl基本语法操作 三、系统运行级别Linux进程运行级别查看当前运行级别修改当前运行级别 四、关机重启命令 一、进程与服务 守护进程与服务是一个东西。 二、systemctl 基本语法 systemctl start|stop|restart|status 服务名查看服务的方法…...

编程日记 2025/5/14 7:52:20

CTFSHOW-WEB入门-命令执行71-77

题目&#xff1a;web 71 题目&#xff1a;解题思路&#xff1a;分析可知highlight_file() 函数被禁了&#xff0c;先想办法看看根目录&#xff1a;cvar_export(scandir(dirname(‘/’))); 尝试一下发现很惊奇&#xff1a;&#xff08;全是&#xff1f;&#xff09;这种情况我也…...

编程日记 2025/5/14 8:13:05

[MRCTF2020]Ez_bypass1(md5绕过)

[MRCTF2020]Ez_bypass1(md5绕过) ​​ 这道题就是要绕过md5强类型比较&#xff0c;但是本身又不相等&#xff1a; md5无法处理数组&#xff0c;如果传入的是数组进行md5加密&#xff0c;会直接放回NULL&#xff0c;两个NuLL相比较会等于true&#xff1b; 所以?id[]1&gg…...

编程日记 2025/5/8 16:36:50

PPT演示设置：插入音频同步切换播放时长计算

PPT中插入音频&同步切换&放时长计算 一、 插入音频及音频设置二、设置页面切换和音频同步三、播放时长计算四、使用宏设置设置页面切换和音频同步一、 插入音频及音频设置 1.插入音频：点击菜单栏插入-音频-选择PC上的音频（已存在的音频）或者录制音频（现场录制） …...

编程日记 2025/5/14 10:20:45

Modbus Slave RTU 在 AVP28335（兼容德州仪器TMS 320 28335） 上实现含源码及注释。

今天先把题目先给出来&#xff0c; 在近两天会把源码 &#xff08;含详细注释 &#xff09;及部署、测试结果给出来&#xff0c; 希望能给大家帮助。&#xff08;原来这个程序在CSDN中&#xff0c;有小伙伴已经写了一些&#xff0c;但是发现里面埋了很多坑&#xff0c;例如&…...

编程日记 2025/5/12 0:43:46

git-secret 使用教程

以下是一份详细的 git-secret 使用教程&#xff0c;包含常见场景的 Bash 代码示例&#xff1a; 1. 安装 git-secret # Ubuntu/Debian sudo apt-get install git-secret# macOS (Homebrew) brew install git-secret# 其他 Linux (Snap) sudo snap install git-secret# 验证安装…...

编程日记 2025/5/11 4:20:10

防火墙安全策略

目录 一.拓扑及需求 二.需求分析 三.配置详细信息 防火墙&#xff1a; OA server&#xff1a; Web Server&#xff1a; PC1&#xff1a; ​编辑PC2&#xff1a; PC3&#xff1a; 配置安全区域&#xff1a; 交换机&#xff1a; 四.需求实现以及测试&#xff1a; 1.…...

编程日记 2025/5/12 10:51:03

蓝桥杯python基础算法（2-2）——基础算法（D）——进制转换*

目录 五、进制转换 十进制转任意进制&#xff0c;任意进制转十进制 例题 P1230 进制转换 作业 P2095 进制转化 作业 P2489 进制 五、进制转换 十进制转任意进制&#xff0c;任意进制转十进制 int_to_char "0123456789ABCDEF" def Ten_to_K(k, x):answer "…...

编程日记 2025/5/11 19:19:11

VSCode源码分析参考资料

VSCode Architecture Analysis - Electron Project Cross-Platform Best Practices 中文版 VSCode 架构分析 - Electron 项目跨平台最佳实践 Sihan Li博客上的vscode源码分析系列&#xff1a;分析了微服务架构、事件体系、资源管理、配置系统等 文召博客上的vscode 源码解析…...

编程日记 2025/5/12 23:15:32

深入理解 Rust 模块中的路径与公开性：绝对路径、相对路径和 `pub` 的应用

1. 路径的两种形式&#xff1a;绝对路径与相对路径 在 Rust 中&#xff0c;路径类似于文件系统中的目录路径&#xff0c;用来告诉编译器去哪里查找某个项。路径主要有两种形式&#xff1a; 绝对路径 绝对路径从 crate 的根开始。对于当前 crate 的代码&#xff0c;绝对路径以关…...

编程日记 2025/5/12 20:54:07

DeepSeek R1 大模型本地部署指南

以下是部署DeepSeek R1大模型的详细Markdown指南&#xff0c;可直接保存为.md文件并分享&#xff1a; # DeepSeek R1 大模型本地部署指南**适用系统**&#xff1a;Windows 10/11 & Linux (Ubuntu 20.04)---## 目录 1. [硬件要求](#硬件要求) 2. [准备工作](#准备工作) 3. […...

编程日记 2025/5/13 5:04:19

从Proxmox VE开始：安装与配置指南

前言 Proxmox Virtual Environment (Proxmox VE) 是一个开源的虚拟化平台&#xff0c;基于Debian Linux&#xff0c;支持KVM虚拟机和LXC容器。它提供了一个强大的Web管理界面&#xff0c;方便用户管理虚拟机、存储、网络等资源。Proxmox VE广泛应用于企业级虚拟化、云计算和开…...

编程日记 2025/5/3 9:39:30

Docker 安装详细教程（适用于CentOS 7 系统）

目录 步骤如下&#xff1a; 1. 卸载旧版 Docker 2. 配置 Docker 的 YUM 仓库 3. 安装 Docker 4. 启动 Docker 并验证安装 5. 配置 Docker 镜像加速 总结 前言 Docker 分为 CE 和 EE 两大版本。CE即社区版&#xff08;免费&#xff0c;支持周期7个月&#xff09;&#xf…...

编程日记 2025/5/13 4:09:57

前端 | 浅拷贝深拷贝

在前端开发中&#xff0c;我们经常需要复制对象或数组&#xff0c;但不同的复制方式可能会影响数据的完整性和应用的稳定性。本文将深入探讨浅拷贝&#xff08;Shallow Copy&#xff09;和深拷贝&#xff08;Deep Copy&#xff09;的区别、实现方式及适用场景。 1. 浅拷贝 1.…...

编程日记 2025/4/23 13:52:35

巧用 Cursor+Coze，轻松简化小程序开发

一、为啥要用 Cursor+Coze 简化小程序开发 家人们，如今小程序简直火出圈啦！不管你是电商从业者，还是服务行业的工作者，又或是自媒体运营者，拥有一个小程序，就相当于给业务插上了腾飞的翅膀，能带来更多的流量和机会。但是，小程序开发的过程，那可真是充满了挑战。从最开…...

编程日记 2025/5/13 7:57:58

Spring Boot常用注解深度解析：从入门到精通

今天&#xff0c;这篇文章带你将深入理解Spring Boot中30常用注解&#xff0c;通过代码示例和关系图&#xff0c;帮助你彻底掌握Spring核心注解的使用场景和内在联系。 一、启动类与核心注解 1.1 SpringBootApplication 组合注解&#xff1a; SpringBootApplication Confi…...

编程日记 2025/5/11 2:17:30

解决Mac安装软件的“已损坏，无法打开。 您应该将它移到废纸篓”问题

mac安装软件时&#xff0c;如果出现这个问题&#xff0c;其实很简单 首先打开终端&#xff0c;输入下面的命令 sudo xattr -r -d com.apple.quarantine 输入完成后&#xff0c;先不要回车&#xff0c;点击访达--应用程序--找到你无法打开的app图标&#xff0c;拖到终端窗口中…...

编程日记 2025/5/13 2:40:06

爱普生L3153打印机无线连接配置流程

家里使用的是移动宽带中兴路由器&#xff0c;有WPS功能&#xff0c;进入192.168.1.1管理员页面&#xff0c;用户名user&#xff0c;密码在路由器背面&#xff08;可以登录后修改密码&#xff09;。在网络-WLAN网络配置-WPS中&#xff0c;点击push button&#xff0c;激活路由器…...

编程日记 2025/5/13 3:15:57

第二十章 存储函数

目录 一、概述 二、语法 三、示例 一、概述 前面章节中&#xff0c;我们详细讲解了MySQL中的存储过程&#xff0c;掌握了存储过程之后&#xff0c;学习存储函数则肥仓简单&#xff0c;存储函数其实是一种特殊的存储过程&#xff0c;也就是有返回值的存储过程。存储函数的参数…...

编程日记 2025/5/14 4:41:13

pytorch实现门控循环单元 (GRU）

人工智能例子汇总&#xff1a;AI常见的算法和例子-CSDN博客 特性GRULSTM计算效率更快&#xff0c;参数更少相对较慢&#xff0c;参数更多结构复杂度只有两个门&#xff08;更新门和重置门&#xff09;三个门&#xff08;输入门、遗忘门、输出门&#xff09;处理长时依赖一般适…...

编程日记 2025/5/14 8:18:14

unity报错不存在类型或者命名空间

导入资源或者打开项目时&#xff0c;突然发现多了一堆报错&#xff0c;如 Assets\2DGamekit\Utilities\DefaultPlayables\ScreenFader\ScreenFaderBehaviour.cs(5,19): error CS0234: The type or namespace name UI does not exist in the namespace UnityEngine (are you mi…...

编程日记 2025/5/12 11:50:06

Qt展厅播放器/多媒体播放器/中控播放器/帧同步播放器/硬解播放器/监控播放器

一、前言说明 音视频开发除了应用在安防监控、视频网站、各种流媒体app开发之外&#xff0c;还有一个小众的市场&#xff0c;那就是多媒体展厅场景&#xff0c;这个场景目前处于垄断地位的软件是HirenderS3&#xff0c;做的非常早而且非常全面&#xff0c;都是通用的需求&…...

编程日记 2025/5/14 2:57:27

Spring Bean 的生命周期介绍

Spring Bean 的生命周期涉及多个阶段&#xff0c;从实例化到销毁&#xff0c;在开发中我们可以通过各种接口和注解介入这些阶段来定制化自己的功能。以下是详细的生命周期流程&#xff1a; 1. Bean 的实例化&#xff08;Instantiation&#xff09; 方式&#xff1a;通过构造函…...

编程日记 2025/5/14 4:35:29

奥卡姆剃刀原理：用简单的力量，解锁复杂的世界

奥卡姆剃刀原理 大名鼎鼎的奥卡姆剃刀原理&#xff08;Occam’s Razor&#xff09;&#xff0c;其含义很简单&#xff0c;就一句话&#xff1a;“如无必要&#xff0c;勿增实体”。 这句看似简单却蕴含着深刻智慧的话&#xff0c;是由14世纪的英格兰逻辑学家、圣方济各会修士…...

编程日记 2025/5/12 13:39:44

STM32 串口发送与接收

接线图 代码配置 根据上一章发送的代码配置&#xff0c;在GPIO配置的基础上需要再配置PA10引脚做RX接收&#xff0c;引脚模式可以选择浮空输入或者上拉输入&#xff0c;在USART配置串口模式里加上RX模式。 配置中断 //配置中断 USART_ITConfig(USART1, USART_IT_RXNE, ENABLE…...

编程日记 2025/5/14 1:26:16

如何生成强密码：提高网络安全性的全面指南

引言 在数字化时代&#xff0c;密码的安全性至关重要。随着我们在社交媒体、电子邮件、在线银行等平台上储存越来越多的个人信息&#xff0c;强密码的使用变得更加关键。强密码能有效防止暴力破解、字典攻击等安全威胁。因此&#xff0c;在本文中&#xff0c;我们将深入探讨如…...

编程日记 2025/5/13 22:35:09

如何不更新application.yml而更新spring的配置

更改应用程序外部属性的位置 默认情况下&#xff0c;来自不同来源的属性会按定义的顺序添加到 Spring 中&#xff08;有关确切顺序&#xff0c;请参阅“Spring Boot 功能”部分中的“外部化配置”&#xff09;。Environment 您还可以提供以下系统属性&#xff08;或环境变量&…...

编程日记 2025/5/12 15:15:31

【Unity踩坑】Unity项目管理员权限问题（Unity is running as administrator ）

问题描述&#xff1a; 使用Unity Hub打开或新建项目时会有下面的提示。 解决方法&#xff1a; 打开“本地安全策略”&#xff1a; 在Windows搜索栏中输入secpol.msc并回车&#xff0c;或者从“运行”对话框&#xff08;Win R&#xff0c;然后输入secpol.msc&#xff09;启…...

编程日记 2025/5/12 12:47:16

【JavaScript】《JavaScript高级程序设计 (第4版) 》笔记-Chapter1-什么是 JavaScript

一、什么是 JavaScript 虽然 JavaScript 和 ECMAScript&#xff08;发音为“ek-ma-script”&#xff09; 基本上是同义词&#xff0c;但 JavaScript 远远不限于 ECMA-262 所定义的那样。没错&#xff0c;完整的 JavaScript 实现包含以下几个部分。 核心&#xff08;ECMAScript&…...

编程日记 2025/5/12 16:00:17

队列 + 宽搜（4题）

目录 1.n叉树的层序遍历 2.二叉树的锯齿形层序遍历 3.二叉树的最大宽度 4.在每个树行中找最大值 1.n叉树的层序遍历 429. N 叉树的层序遍历 - 力扣&#xff08;LeetCode&#xff09; 我们只需要把某个节点出队的时候把它的孩子节点添加进来即可。 出队的次数就是最开始队列…...

编程日记 2025/5/13 11:42:47

二、面向对象

一、结构体类型 结构体类型是一种自定义类型&#xff0c;用于创建我们游戏或者实际业务中的自定义类型. 代码中变量有通用的&#xff0c;可以使用结构体&#xff0c;包裹起来。 1、成员变量 /// <summary> /// 英雄结构体 /// </summary> struct Hero {//成员p…...

编程日记 2025/5/9 9:55:50

【DeepSeek背后的技术】系列二：大模型知识蒸馏（Knowledge Distillation）

目录 1 引言2 操作步骤和公式说明2.1 准备教师模型&#xff08;Teacher Model&#xff09;和学生模型&#xff08;Student Model&#xff09;2.2 生成软标签&#xff08;Soft Labels&#xff09;2.3 定义蒸馏损失函数2.4 训练学生模型2.5 调整超参数2.6 评估与部署 3 其他知识蒸…...

编程日记 2025/5/13 4:09:49

PyQt4学习笔记2】QMainWindow

目录 一、创建 QMainWindow 组件 1. 创建工具栏 2. 创建停靠窗口 3. 设置状态栏 4. 设置中央窗口部件 二、QMainWindow 的主要方法 1. addToolBar() 2. addDockWidget() 3. setStatusBar() 4. setCentralWidget() 5. menuBar() 6. saveState() 和 restoreState() 三、QMainWind…...

编程日记 2025/5/12 11:19:59

《海丰县蔡氏简介》前言

《海丰县蔡氏简介》前言 蔡惠进主编 汕尾市海陆丰蔡姓祖先基本是福建人&#xff0c; 在宋朝时迁至海丰&#xff0c; 因受潮汕文化、 客家文化、 广府文化、 政治归属等系列因素影响&#xff0c; 形成了闽南人一 种新的文化&#xff0c; 既有传统的闽南文化&#xff0c; 又有潮汕…...

编程日记 2025/5/13 13:38:50

深入探索Vue 3组合式API

深入探索Vue 3组合式API 深入探索Vue 3组合式API一、组合式API诞生背景1.1 Options API的局限性1.2 设计目标二、核心概念解析2.1 setup() 函数&#xff1a;组合式API的基石2.2 响应式系统&#xff1a;重新定义数据驱动2.3 生命周期&#xff1a;全新的接入方式2.4 响应式原理探…...

编程日记 2025/5/12 11:19:55

获取 ARM Cortex - M 系列处理器中 PRIMASK 寄存器的值

第一种实现&#xff08;纯汇编形式&#xff09; __ASM uint32_t __get_PRIMASK(void) {mrs r0, primaskbx lr }代码分析 __ASM 关键字&#xff1a;这通常是特定编译器&#xff08;如 ARM GCC 等&#xff09;用于嵌入汇编代码的指示符。它告诉编译器下面的代码是汇编代码。mrs …...

编程日记 2025/5/12 7:32:52

使用deepseek写一个单击，双击和长按的检测函数

DeepSeek好火&#xff0c;注册试用一下&#xff0c;感觉和chatgpt o1差别不大&#xff0c;唯一的问题就是追多几次就崩溃了&#xff0c;再问不下去了。以下是测试结果。 提问&#xff1a; 请使用c语言写一个函数&#xff0c;输入参数是是为&#xff1a; A为当前的输入量&am…...

编程日记 2025/5/5 17:43:56

MySQL面经

1.范式 第一范式&#xff1a;每一列都不能再拆分 第二范式&#xff1a;在第一范式的基础上&#xff0c;非主键列完全依赖于主键&#xff0c;而不是主键的一部分 第三范式&#xff1a;在第二范式的基础上&#xff0c;非主键列只依赖于主键列&#xff0c;而不依赖于其他非主键…...

编程日记 2025/5/13 0:07:47

【C++】P1765 手机

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;问题描述题目内容示例&#xff1a; 键盘布局 &#x1f4af;我的做法思路问题与优化我的代码实现分析与问题 &#x1f4af;老师的做法思路老师的代码实现分析优点 &#x1f…...

编程日记 2025/5/14 1:19:02

MyBatis-Plus速成指南：简化你的数据库操作流程

简介&#xff1a; MyBatis-Plus 是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。MyBatsi-Plus 提供了通用的 Mapper 和 Service&#xff0c;可以不编写任何 SQL 语句的前提下&#xff0c;快速的实现单表的增…...

编程日记 2025/5/12 6:13:10

DeepSeek超越ChatGPT的能力及部分核心原理

DeepSeek超越ChatGPT的能力及部分核心原理 目录 DeepSeek超越ChatGPT的能力及部分核心原理超越ChatGPT的能力核心原理超越ChatGPT的能力 推理计算能力更强：在复杂的数学计算、法律文件审查等任务中，DeepSeek的推理能力可媲美甚至超越部分国际顶尖AI模型，包括ChatGPT。例如在…...

编程日记 2025/4/29 14:19:59