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

Vue 2 生命周期函数详解

news 来源：原创 2025/7/5 4:07:46

Vue 2 生命周期函数详解

引言

Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。理解 Vue 的生命周期函数（Lifecycle Hooks）对于开发高效的 Vue 应用至关重要。本文将详细介绍 Vue 2 的生命周期钩子、每个阶段的作用及其代码示例，帮助读者更好地掌握这一重要概念。

1. Vue 生命周期概述

Vue 实例从创建到销毁经历了一系列的阶段，这些阶段被称为生命周期。在每个阶段，Vue 提供了相应的钩子函数（Lifecycle Hooks），允许开发者在特定的时间点执行自定义逻辑。

以下是 Vue 2 的生命周期图：

(new) --> init() --> beforeCreate() --> created() --> beforeMount() --> mounted()|                        |v                        v(data observer)         (render DOM)|                        |v                        vupdated()               beforeUpdate()|                        |v                        vdestroyed()           beforeDestroy()
2. 常见的生命周期钩子
a. beforeCreate
  • 描述：实例刚刚被创建，数据观测（data observer）、属性和方法的运算还未开始，el 和 data 属性都未初始化。
  • 使用场景：很少在这个阶段做操作，因为此时无法访问数据和 DOM。
b. created
  • 描述：实例已完成数据观测，属性和方法的运算，data 已经初始化，但还没有挂载到 DOM 上。
  • 使用场景：适合进行异步数据获取或初始化状态。

示例代码：

new Vue({data: {message: 'Hello Vue!'},created() {console.log('created:', this.message);// 在这里可以发起异步请求，获取数据}
});
c. beforeMount
  • 描述：在挂载开始之前被调用，相关的 el 和 template 已经编译为虚拟 DOM，但尚未渲染到页面上。
  • 使用场景：可以在渲染之前修改数据或虚拟 DOM。
d. mounted
  • 描述：实例已经挂载到真实的 DOM 上，此时可以访问到 DOM 元素。
  • 使用场景：适合初始化第三方库、绑定事件监听器等需要操作真实 DOM 的场景。

示例代码：

new Vue({el: '#app',mounted() {console.log('mounted:', this.$el);// 初始化第三方库，如 jQuery 插件}
});
e. beforeUpdate
  • 描述：数据更新时调用，在此期间你可以访问旧的 DOM 状态。
  • 使用场景：适合在数据更新前进行一些处理，比如取消不必要的网络请求。
f. updated
  • 描述：由于数据更改导致的视图更新完成后调用。注意，这时不应该在此钩子中进一步更改状态，否则会导致递归调用。
  • 使用场景：适合在视图更新后执行的操作，例如操作新增的 DOM 元素。

示例代码：

new Vue({data: {message: 'Hello Vue!'},methods: {changeMessage() {this.message = 'Updated Message';}},updated() {console.log('updated:', this.message);// 不要在 updated 中改变 state，以免造成递归更新}
});
g. beforeDestroy
  • 描述：实例即将被销毁之前调用。在这一步，实例仍然是完全可用的。
  • 使用场景：适合清理定时器、解绑事件监听器等资源释放操作。
h. destroyed
  • 描述：实例销毁后调用。此时所有的指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
  • 使用场景：确保所有资源都被正确释放，避免内存泄漏。

示例代码：

new Vue({data: {timer: null},created() {this.timer = setInterval(() => {console.log('Timer running...');}, 1000);},beforeDestroy() {clearInterval(this.timer);console.log('Timer cleared before destruction.');},destroyed() {console.log('Instance has been destroyed.');}
});

相关文章：

Vue 2 生命周期函数详解

Vue 2 生命周期函数详解 引言 Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。理解 Vue 的生命周期函数（Lifecycle Hooks）对于开发高效的 Vue 应用至关重要。本文将详细介绍 Vue 2 的生命周期钩子、每个阶段的作用及其代码示例&…...

编程日记 2025/7/5 4:07:46

Vue的路由实现模式：hash模式和history模式

Vue 路由的两种模式： hash 模式： 类似于住在一个大房子里，你的地址很长，但用一个 “门牌号”（# 后面的部分）来标识你住哪间房间。 例如： bash http://example.com/#/home 这就好比 “example.…...

编程日记 2025/7/4 7:15:43

R语言 | 峰峦图 / 山脊图

目的：为展示不同数据分布的差异。 1. ggplot2 实现 # 准备数据 datmtcars[, c("mpg", "cyl")] colnames(dat)c("value", "type") head(dat) # value type #Mazda RX4 21.0 6 #Mazda RX4 Wag …...

编程日记 2025/7/5 4:03:25

Kubernetes(K8s)

头条：参考资料 Kubernetes 入门指南：从基础到实践_kubernetes 从入门到实践-CSDN博客 Kubernetes（k8s）与docker的区别 Docker、Kubernetes之间的区别_docker和kubernetes区别-CSDN博客 Docker部署SpringBoot项目（镜…...

编程日记 2025/7/1 12:50:34

【代码随想录|贪心算法05】

56.合并区间 题目链接56. 合并区间 - 力扣&#xff08;LeetCode&#xff09; 这道题思路跟前两道也很像&#xff0c;就是更新把相同的区间合并而已。 class Solution { public: static bool cmp(const vector<int>& a,const vector<int>& b){return a[0…...

编程日记 2025/7/1 20:17:58

QQ聊天室--C++基础项目--QT+Socket网络编程

目录 一、项目概述 二、项目成果 1、QQ基础界面展示&#xff1a; 2、群聊界面展示&#xff1a; 3、聊天功能展示 三、项目代码 1、登录头文件&#xff08;denglu.h&#xff09; 2、登录源文件&#xff08;denglu.cpp&#xff09; 3、聊天界面头文件&#xff08;widget.…...

编程日记 2025/7/2 1:20:10

分布式搜索引擎之elasticsearch基本使用2

分布式搜索引擎之elasticsearch基本使用2 在分布式搜索引擎之elasticsearch基本使用1中&#xff0c;我们已经导入了大量数据到elasticsearch中&#xff0c;实现了elasticsearch的数据存储功能。但elasticsearch最擅长的还是搜索和数据分析。 所以j接下来&#xff0c;我们研究下…...

编程日记 2025/7/4 8:02:55

今日商协丨商协会在“双循环”新发展格局中的作用

在当今全球经济环境中&#xff0c;世界格局正在经历深刻变化&#xff0c;中国正在全面构建“双循环”新发展格局&#xff0c;以实现更高质量、更可持续的发展。在这一过程中&#xff0c;商协会发挥着不可或缺的作用。 商协会在国内大循环中扮演促进者的角色&#xff0c;不仅活…...

编程日记 2025/7/2 13:39:57

前端项目安装node-sass

这个依赖比较难装&#xff0c;因为这个依赖需要安装的版本是和node版本绑定的&#xff0c;所以你需要去sass的官网找到对应关系&#xff0c;下面是我的版本信息&#xff1a; node 16.14.2 node-sass:^6.0.1 sass-loader:^10.2.0 "sass": "^1.82.0", 你…...

编程日记 2025/7/3 6:43:11

算法-字符串-678.有效的括号字符串

一、题目 二、思路解析 1.思路&#xff1a; 用leftMin变量来记录存在的“&#xff08;”&#xff0c; 用leftMax变量记录字符串中最多的“&#xff08;” 2.常用方法&#xff1a; 无 3.核心逻辑&#xff1a; 1.遍历字符串&#xff1a; a.当前字符为"("&#xff0c;le…...

编程日记 2025/6/30 13:00:10

linux 压缩文件为zip

在 Linux 系统中&#xff0c;可以使用 zip 命令来压缩文件或目录 打开终端&#xff08;Terminal&#xff09;。 使用 cd 命令导航到要压缩的文件或目录所在的路径。 运行以下命令来压缩文件或目录&#xff1a; 压缩单个文件&#xff1a; zip output.zip file.txt这里&#xf…...

编程日记 2025/7/5 3:38:10

Cisco Packet Tracer | Cisco Packet Tracer - VLAN 实验 - 交换机的 VLAN 划分

关注这个工具的其它相关笔记&#xff1a;Cisco Packet Tracer —— 使用教程合集-CSDN博客 0x01&#xff1a;VLAN 划分 - 单个交换机 0x0101&#xff1a;拓扑搭建流程 从软件底部拖出一台交换机&#xff08;笔者选择的型号是 2960 IOS15&#xff09;&#xff1a; 然后再拖出四…...

编程日记 2025/7/5 3:48:18

《计算机网络》（408大题）

2009 路由转发和静态路由的计算 子网划分、路由聚合的计算 注&#xff1a;CIDR中的子网号可以全为0或1&#xff0c;但是其主机号不允许。 注&#xff1a; 这里其实是把到互联网的路由当做了一个默认路由&#xff08;当一个目的网络地址与路由表中其他都不匹配时&#xff0c;…...

编程日记 2025/7/5 0:27:13

二叉树概述

目录 一、二叉树的基本结构 二、二叉树的遍历 1.前序 2.中序 3.后序 4.层序遍历 三.计算二叉树的相关参数 1.计算节点总个数 2.计算叶子节点的个数 3.计算树的高度 4.计算第k层的子树个数 5.查找树中val为x的节点 四.刷题 1.单值二叉树 2.检查两棵树是否相同 3.一…...

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

qiankun学习记录

什么是微前端 微前端是指存在于浏览器中的微服务&#xff0c;其借鉴了微服务的架构理念&#xff0c;将微服务的概念扩展到了前端。 如果对微服务的概念比较陌生的话&#xff0c;可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块&#xff0c;每个微前端模块可以…...

编程日记 2025/6/30 16:13:26

【C++ 20进阶（2）：初始化 Initializer

【C 20进阶&#xff08;2&#xff09;&#xff1a;初始化 Initializer】 原文&#xff1a;https://blog.csdn.net/weixin_44259356/article/details/144377955 引言 本篇文章为系列文章将着重介绍C20新特性&#xff0c;一是希望可以和大家交流分享&#xff0c;二是也便于自己…...

编程日记 2025/7/3 8:46:10

vue3学习——事件监听（v-on）

我们可以使用 v-on 指令监听 DOM 事件&#xff1a; <button v-on:click"increment">{{ count }}</button> 因为其经常使用&#xff0c;v-on 也有一个简写语法&#xff1a; <button click"increment">{{ count }}</button> 此处…...

编程日记 2025/7/4 11:53:42

java全栈day13-后端Web实战2

接上述查询部门实现&#xff0c;完成后续要求 一、统一响应结果 1.1步骤 资料如下 对一开始的代码修改如下 结果如下 1.2测试 指定请求方式 结果 小结 二、前后端联调测试 资料如下&#xff1a; (不行&#xff0c;一定要不带空格和不带中文&#xff0c;要不然启动不了试了半天…...

编程日记 2025/7/2 10:14:33

C++/CX，一个智能的 C++/Windows 平台开发库！

以下是一篇关于C/CX的C学习文章&#xff1a; 开篇 嘿&#xff0c;大家好呀&#xff01;我是一行。今天咱们来一起探索一个超棒的C开发库——C/CX&#xff0c;它可是在Windows平台开发中非常智能且强大的工具哦&#xff0c;能让我们的开发变得更加高效便捷。让我们一起开启今天的…...

编程日记 2025/6/29 14:00:32

分布式 分布式事务 总结

前言 相关系列 《分布式 & 目录》《分布式 & 分布式事务 & 总结》《分布式 & 分布式事务 & 问题》 分布式事务 所谓分布式事务是指操作范围笼罩多个不同节点的事务。例如对于订单节点&库存节点而言&#xff0c;一次完整的交易需要同时调动两个节…...

编程日记 2025/7/5 3:53:28

数据结构（3）单链表的模拟实现

上一节我们进行了数据结构中的顺序表的模拟式现&#xff0c;今天我们来实现一下另外一个数据结构&#xff1a;单链表。 我们在实现顺序表之后一定会引发一些问题和思考&#xff1a; 1.顺序表在头部和中间插入数据会用到循环&#xff0c;时间复杂O&#xff08;N&#xff09; …...

编程日记 2025/7/5 3:27:58

HBU深度学习实验14.5-循环神经网络（1.5）

梯度爆炸实验 造成简单循环网络较难建模长程依赖问题的原因有两个&#xff1a;梯度爆炸和梯度消失。一般来讲&#xff0c;循环网络的梯度爆炸问题比较容易解决&#xff0c;一般通过权重衰减或梯度截断可以较好地来避免&#xff1b;对于梯度消失问题&#xff0c;更加有效的方式…...

编程日记 2025/7/1 13:44:36

Redis01

springbootredis 特点 1.高效性 2.支持多种数据结构 String,list,set,hash.zset 3.稳定性&#xff1a;持久化&#xff0c;主从复制&#xff08;集群&#xff09; 4.其他特性&#xff1a;支持过期时间&#xff0c;支持事务&#xff0c;消息订阅。 安装 1.下载安装包 redis官…...

编程日记 2025/7/4 10:21:24

数据库中decimal、float 和 double区别

在计算机科学中&#xff0c;decimal、float 和 double 是用于表示和处理数值的不同数据类型。 - decimal 是一种精确的十进制浮点数表示&#xff0c;通常用于需要高精度计算的场景&#xff0c;比如财务应用。它能够精确表示小数&#xff0c;并且不会出现浮点数运算误差。 - flo…...

编程日记 2025/7/5 4:05:11

HDR视频技术之五：HDR生产流程

在介绍 HDR 的生产流程之前&#xff0c;我们先介绍下视频制作与传输的一些基本知识。 内容类型&#xff1a; 直播内容&#xff08; live content&#xff09; ——所谓的直播内容即没有后处理过程以及创作者意图。分发给用户的信息是实时产生并且实时制作并派发的。常见的应用…...

编程日记 2025/7/5 3:34:37

CTFshow-爆破(Web21-28)

CTFshow-爆破(Web21-28) Web21 抓包 选则dic.zip里的字典爆破&#xff0c;记得添加前缀admin: 答案admin:shark63 burp里有一个自定义迭代器&#xff0c;可以设置前几部分&#xff0c;很好用 Web22 题目失效了直接看wp吧 360quake 使用空间搜索引擎—>360quake 搜索语法…...

编程日记 2025/7/3 8:45:06

C++重点和练习

作业题目&#xff1a; #include <iostream> using namespace std; class Rec {const int length;int width; public:void set_length(int l);void set_width(int w);int get_length();int get_width();void show(); };#include <iostream> using namespace std; c…...

编程日记 2025/7/5 1:34:08

UnityShaderLab-实现溶解效果

实现思路&#xff1a; 使用一张噪声图&#xff0c;与一个Cut值计算&#xff08;加或减&#xff09;&#xff0c;将计算后的值赋值给Alpha,然后小于0的片段就被丢弃掉了。 ShaderGraph实现&#xff1a; ShaderLab实现&#xff1a; Shader "Dissolve" {Properties{_…...

编程日记 2025/6/30 10:43:01

SQLite 数据库学习

1.install sudo apt update sudo apt install sqlitebrowser这是一个开源的图形用户界面工具&#xff0c;专门用于开发、管理和分析 SQLite 数据库。它支持创建或导入导出表、编辑数据、执行 SQL 查询等功能。 2.python 操作数据库 Python 内置了 sqlite3 模块&#xff0c;使…...

编程日记 2025/7/2 18:26:02

【LeetCode: 463. 岛屿的周长 + bfs】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…...

编程日记 2025/7/2 21:11:39

Bean的注入、单例和多例

目录 注入Bean对象 属性注入 构造注入 属性注入专题 注入集合/数组 级联简单类型赋值 Bean的单例和多例 注入Bean对象 简单类型使用value(除Date)&#xff0c;非简单类型使用ref 属性注入 name规则&#xff1a;必须提供set方法&#xff0c;去掉set&#xff0c;第一个字…...

编程日记 2025/7/2 17:20:41

java 使用JSqlParser和CCJSqlParser 解析sql

maven <dependency><groupId>com.github.jsqlparser</groupId><artifactId>jsqlparser</artifactId><version>4.9</version> </dependency>解析SQL String sql "select aa,bb from b"; Statement statementCCJSq…...

编程日记 2025/6/30 12:31:03

Anaconda Conda Pip 的区别与联系

在Python生态中，Anaconda、Conda和Pip是三个非常重要的工具，它们在包管理和环境管理方面发挥着关键作用。 Anaconda Anaconda是一个为科学计算而设计的Python发行版，它集成了Conda、Python以及大量的数据科学相关库，如NumPy、Pandas等。Anaconda的主要优势在于它提供了一个…...

编程日记 2025/7/3 7:35:32

总结的一些MySql面试题

目录 一&#xff1a;基础篇 二&#xff1a;索引原理和SQL优化 三&#xff1a;事务原理 四&#xff1a;缓存策略 一&#xff1a;基础篇 1&#xff1a;定义&#xff1a;按照数据结构来组织、存储和管理数据的仓库&#xff1b;是一个长期存储在计算机内的、有组织的、可共享 的…...

编程日记 2025/7/3 6:35:38

【实验15】LSTM的记忆能力实验

目录 1 模型构建 1.1 LSTM层 1.1.1 自定义LSTM算子 1.1.2 nn.LSTM 1.1.3 将自定义LSTM与pytorch内置的LSTM进行对比 1.2 模型汇总 2 模型训练 2.1 训练指定长度的数字预测模型 2.2 多组训练 2.3 损失函数展示 3 模型评价 4 完整代码 5 LSTM模型门状态和单元状态的…...

编程日记 2025/7/2 11:27:52

SSH克隆github项目

1、生成密钥 ssh-keygen -t rsa -C "你的邮箱xxx.com" 全程回车即可&#xff08;不用输入ras文件名及密码&#xff09;、为了方便下面的公钥查看 2、配置公钥 查看公钥内容 cat c:\Users\xxx\.ssh\id_rsa.pub(修改为自己的路径及名字) 将公钥内容复制并粘贴至…...

编程日记 2025/6/30 15:56:04

计算机网络ENSP课设--三层架构企业网络

本课程设计搭建一个小型互联网&#xff0c;并模拟Internet的典型Web服务过程。通过此次课程设计&#xff0c;可以进一步理解Internet的工作原理和协议过程&#xff0c;并提高综合知识的运用能力和分析能力。具体目标包括&#xff1a; &#xff08;1&#xff09;掌握网络拓扑的…...

编程日记 2025/7/1 13:40:58

Node.js系统模块

【图书介绍】《Node.jsMongoDBVue.js全栈开发实战》-CSDN博客 《Node.jsMongoDBVue.js全栈开发实战&#xff08;Web前端技术丛书&#xff09;》(邹琼俊)【摘要 书评 试读】- 京东图书 (jd.com) 2.2.1 什么是系统模块 由于Node.js运行环境提供的API都是以模块化的方式进行开…...

编程日记 2025/7/3 21:20:32

React - useActionState、useFormStatus与表单处理

参考文档&#xff1a;react18.3.1官方文档 一些概念&#xff1a; React 的 Canary 和 Experimental 频道是 React 团队用于发布和测试新功能的渠道。 useActionState useActionState 是一个可以根据某个表单动作的结果更新 state 的 Hook。 const [state, formAction, isPe…...

编程日记 2025/6/28 20:27:48

GC常见垃圾回收算法，JVM分代模型

如何判断是垃圾&#xff1f;引用计数器和Root可达性算法 如何进行清除&#xff1f;标记清除、复制、标记整理 堆分代模型&#xff1f;Eden&#xff0c;Surevivor&#xff0c;Tenuring 一个对象从创建到消亡的过程&#xff1f; 对象什么时候进入老年代&#xff1f; 一、GC&a…...

编程日记 2025/7/1 22:06:14

深入探索 JVM：原理、机制与实战

一、JVM 概述 JVM&#xff08;Java Virtual Machine&#xff09;是 Java 程序运行的核心组件&#xff0c;它提供了一个独立于硬件和操作系统的执行环境&#xff0c;使得 Java 程序能够在不同平台上具有跨平台的特性。 JVM 主要由以下几部分组成&#xff1a; 类装载器&#xf…...

编程日记 2025/7/1 16:03:00

前端成长之路：HTML（2）

HTML中有两个非常重要的标签——表格和表单&#xff0c;在介绍之前需要先了解表格和表单的区别&#xff1a;表格是用于展示数据的&#xff1b;表单是用于提交数据的。本文主要介绍表格。 表格标签 表格主要是用于显示、展示数据的&#xff0c;并非是页面布局。它可以使本来难…...

编程日记 2025/7/4 23:14:28

python基础：（七）类

目录 一.创建和使用类二.使用类和实例2.1给属性指定默认值2.2修改属性的值2.2.1直接修改属性的值2.2.2通过方法修改属性的值2.2.3通过方法对属性的值进行递增 三.继承3.1子类的方法__init__()3.2给子类定义属性和方法3.3重写父类的方法 四.导入类4.1语法--1:4.2语法--2 前言 p…...

编程日记 2025/7/4 14:18:02

Spring AOP基础、快速入门

介绍 AOP&#xff0c;面向切面编程&#xff0c;作为面向对象的一种补充&#xff0c;将公共逻辑&#xff08;事务管理、日志、缓存、权限控制、限流等&#xff09;封装成切面&#xff0c;跟业务代码进行分离&#xff0c;可以减少系统的重复代码和降低模块之间的耦合度。切面就是…...

编程日记 2025/7/3 5:05:38

Golang使用etcd构建分布式锁案例

在本教程中&#xff0c;我们将学习如何使用Go和etcd构建分布式锁系统。分布式锁系统对于管理对分布式系统中共享资源的并发访问至关重要。它有助于维护一致性&#xff0c;防止竞争条件&#xff0c;并确保在任何给定时间只有一个进程独占访问资源。 我们将使用Go作为编程语言&am…...

编程日记 2025/7/4 5:05:44

深度学习：基于MindSpore的极简风大模型微调

什么是PEFT&#xff1f;What is PEFT&#xff1f; PEFT(Parameter Efficient Fine-Tuning)是一系列让大规模预训练模型高效适应于新任务或新数据集的技术。 PEFT在保持大部分模型权重冻结&#xff0c;只修改或添加一小部份参数。这种方法极大得减少了计算量和存储开销&#x…...

编程日记 2025/7/5 1:11:36

如何在 Android 项目中实现跨库传值

背景介绍 在一个复杂的 Android 项目中&#xff0c;我们通常会有多个库&#xff08;lib&#xff09;&#xff0c;而主应用程序&#xff08;app&#xff09;依赖所有这些库。目前遇到的问题是&#xff0c;在这些库中&#xff0c;libAd 需要获取 libVip 的 VIP 等级状态&#xf…...

编程日记 2025/7/1 1:12:39

HTML：表格重点

用表格就用table caption为该表上部信息&#xff0c;用来说明表的作用 thead为表头主要信息&#xff0c;效果加粗 tbody为表格中的主体内容 tr是 table row 表格的行 td是table data th是table heading表格标题 &#xff0c;一般表格第一行的数据都是table heading...

编程日记 2025/7/3 6:39:20

STM32 出租车计价器系统设计（一） 江科大源码改写

STM32 出租车计价器系统设计 功能目标 驱动步进电机模拟车轮旋转&#xff0c;并实现调速功能。 设置车轮周长和单价&#xff0c;检测车轮转速和运转时间。 计算并显示行驶里程和价格。 硬件材料 28BYJ48 五线四相步进电机和 ULN2003 驱动板模块 测速传感器模块 嵌入式小系统…...

编程日记 2025/7/4 23:42:43

Git基础操作快速入门

Git是一个免费开源分布式版本控制工具&#xff0c;是由Linux的作者Linus开发的第二个伟大作品。2005年由于BitKeeper软件公司对Linux社区停止了免费使用权。Linus迫不得己自己开发了一个分布式版本控制工具&#xff0c;从而Git诞生了 目前使用Git作为版本控制的开源软件&#…...

编程日记 2025/7/1 18:15:43