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

Vue3.0生命周期钩子（包含：Vue 2.0 和 Vue 3.0）

news 2026/2/10 11:43:00

1、Vue 2.0 生命周期钩子

每个应用程序实例在创建时都有一系列的初始化步骤。例如，创建数据绑定、编译模板、将实例挂载到 DOM 并在数据变化时触发 DOM 更新、销毁实例等。在这个过程中会运行一些叫做生命周期钩子的函数，通过这些钩子函数可以定义业务逻辑。应用程序实例中几个主要的生命周期钩子函数的说明如下：

钩子函数说明
beforeCreate()在实例初始化之后且数据观测和事件/监听器配置之前调用。
created()在实例创建之后进行调用，此时尚未开始 DOM 编译。在需要初始化处理一些数据时会比较有用。
beforeMount()在挂载开始之前进行调用，此时 DOM 还无法操作。
mounted()在 DOM 文档渲染完毕之后进行调用。相当于 JavaScript 中的 windos.onload() 方法。
beforeUpdate()在数据更新时进行调用，适合在更新之前访问现在的 DOM，如手动移除已添加的事件监听器。
updated()在数据更新导致的虚拟 DOM 被重新渲染时进行调用。
beforeDestroy()在销毁实例之前进行调用，此时实例仍然有效。此时可以解绑一些使用 addEventListener 监听的事件等。
destroyed()在实例被销毁之后进行调用。

【实例】使用生命周期钩子，了解 Vue.js 内部的运行机制。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue生命周期钩子</title>
</head><body><div id="app"><p>{{text}}</p></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">//创建应用程序实例const vueApp = Vue.createApp({//返回数据对象data() {return {text: "千里之行，始于足下"}},//生命周期钩子beforeCreate: function () {console.log("beforCreate");},created: function () {console.log("created");},beforeMount: function () {console.log("beforeMount");},mounted: function () {console.log("mounted");},beforeUpdate: function () {console.log("beforeUpdate");},updated: function () {console.log("updated");}//转载应用程序实例的根组件}).mount("#app");//使用定时器函数，2秒后修改内容setTimeout(function () {console.log("修改数据内容：")vueApp.text = "水不在深，有龙则灵";}, 2000);
</script></html>

执行结果：

当2秒后调用 setTimeout() 方法，修改 text 的内容，触发 beforeUpdate() 和 updated() 钩子函数。

2、Vue 3.0 生命周期钩子

Vue3.0 是兼容 Vue2.x 版本的也就是说我们再日常工作中可以在 Vue3 中使用 Vue2.x 的相关语法。

Vue 3.0 带来了许多新特性和改进，其中包括更强大的组合 API。与基于选项的 API 相比，组合 API 中的生命周期钩子函数也发生了变化，将选项中的生命周期钩子函数改成了 onXxx() 函数的形式。

需要注意：

1、beforeCreate() 和 created() 两个钩子函数已被删除了，取而代之的是 setup() 函数。

2、组合 API 中的生命周期钩子函数都是在 setup() 函数内部通过引入相应的函数来使用的。

Vue 3.0 中新增的钩子函数主要包括：

组合 API 钩子函数说明
setup()

setup() 函数是一个新的组件选项，它是组件内部使用组合 API 的入口。

setup() 函数在组件实例创建之前、初始化 Prop 之后调用。

setup() 函数可以返回一个对象或函数，对象的属性会合并到组件模板渲染的上下文中。

onBeforeMount()组件挂载到节点上之前执行的函数。
onMounted()组件挂载完成后执行的函数。
onBeforeUpdate()组件更新之前执行的函数。
onUpdated()组件更新完成之后执行的函数。
onBeforeUnmount()组件卸载之前执行的函数
onUnmounted()组件卸载完成后执行的函数。
onActivated()被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行。
onDeactivated()比如从 A 组件，切换到 B 组件，A 组件消失时执行。
onErrorCaptured()当捕获一个来自子孙组件的异常时激活钩子函数。

Vue2.0 和 Vue3.0 生命周期钩子函数对比：

【实例】创建一个组件，实现一个计数器功能。

<template><div><h3>{{ blogInfo.name }}</h3><h3>{{ blogInfo.url }}</h3><p>计数结果：{{ count }}</p><button @click="counter">计数器</button></div>
</template><script>
import { ref, reactive, onMounted, onUnmounted } from 'vue';export default {setup() {// 使用 ref 创建响应式的基本类型const count = ref(0);// 使用 reactive 创建响应式的复杂类型const blogInfo = reactive({name: '您好，欢迎访问 pan_junbiao的博客',url: 'https://blog.csdn.net/pan_junbiao'});// 挂载时的操作onMounted(() => {console.log('组件已挂载');});// 卸载时的操作onUnmounted(() => {console.log('组件已卸载');});// 增加计数的方法function counter() {count.value++;}// 返回需要在模板中使用的数据和方法return {blogInfo,count,counter};}
};
</script>

 执行结果：

相关文章：

Vue3.0生命周期钩子（包含：Vue 2.0 和 Vue 3.0）

1、Vue 2.0 生命周期钩子 每个应用程序实例在创建时都有一系列的初始化步骤。例如&#xff0c;创建数据绑定、编译模板、将实例挂载到 DOM 并在数据变化时触发 DOM 更新、销毁实例等。在这个过程中会运行一些叫做生命周期钩子的函数&#xff0c;通过这些钩子函数可以定义业务逻…...

编程日记 2024/8/20 1:43:37

遥感之常用各种指数总结大全

目前在遥感领域基本各种研究领域都会用到各种各样的指数&#xff0c;如水体指数&#xff0c;植被指数&#xff0c;农业长势指数&#xff0c;盐分指数&#xff0c;云指数&#xff0c;阴影指数&#xff0c;建筑物指数&#xff0c;水质指数&#xff0c;干旱指数等等众多。 本文对上…...

编程日记 2024/8/20 1:40:34

【C++】C++11新增特性

目录 C11简介&#xff1a; 1、统一的列表初始化&#xff1a; std::initializer_list 2、自动类型推导&#xff1a; auto&#xff1a; decltype&#xff1a; 3、final 和 override final&#xff1a; override&#xff1a; 4、默认成员函数控制&#xff1a; 显示缺省…...

编程日记 2024/8/20 1:39:33

【LeetCode每日一题】——662.二叉树最大宽度

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 广度优先搜索 二【题目难度】 中等 三【题目编号】 662.二叉树最大宽度 四【题目描述】 给…...

编程日记 2024/8/20 1:38:32

第二十三节、血量更新逻辑的实现

一、创建代码 引入命名空间 using UnityEngine.UI; 调用UI必须有这个代码 二、ScriptObject类 1、是一个持久化存储文件的类型 接收所有的事件方法 先继承SO类&#xff0c;然后创建项目菜单 2、进行订阅 放入事件类&#xff0c;关联代码&#xff0c;即可进行广播 传递给这…...

编程日记 2024/8/20 1:37:31

Spring Authorization Server 认证服务器搭建

Spring Authorization Server实现了oauth2和oidc，最近有了解相关技术的需求，所以就尝试着进行了基本的环境搭建和技术测试，目前只测试了授权码模式，做一个记录，后续需要用时方便查找和参考。 1. 版本要求 Spring Authorization Server 版本：1.3.1 JDK 版本：17 Spring B…...

编程日记 2024/8/20 1:32:27

秋招突击——8/15——知识补充——垃圾回收机制

文章目录 引言正文指针引用可达性分析算法垃圾回收算法标记清除算法标记整理算法复制分代收集 垃圾收集器Serial收集器ParNew并行收集器Parallel Scavenge吞吐量优先收集器Serial Old老年代收集器Parallel old收集器CMS收集器G1收集器&#xff08;Garbage First垃圾优先&#x…...

编程日记 2024/8/20 1:29:21

【iOS】UITableViewCell的重用问题解决方法

我自己在实验中对cell的重用总结如下&#xff1a; 非自定义Cell和非自定义cell的复用情况一样&#xff1a; 第一次加载创建tableView的时候&#xff0c;是屏幕上最多也显示几行cell就先创建几个cell&#xff0c;此时复用池里什么都没有开始下滑tableView&#xff0c;刚开始滑…...

编程日记 2024/8/20 1:28:20

开发一个微信小程序商城需要哪些技术栈

开发一个小程序商城需要掌握以下技术栈&#xff1a;‌ 前端技术&#xff1a;‌包括HTML、‌CSS和JavaScript&#xff0c;‌用于定义商城的页面结构、‌样式设计和交互功能。‌ 微信小程序专用技术&#xff1a;‌如WXML、‌WXSS、‌JavaScript和JSON&#xff0c;‌用于描述小程…...

编程日记 2024/8/20 1:24:15

望繁信科技荣膺上海市浦东新区博士后创新实践基地称号

近日&#xff0c;上海望繁信科技有限公司&#xff08;简称“望繁信科技”&#xff09;凭借在大数据流程智能领域的卓越表现&#xff0c;成功入选上海市浦东新区博士后创新实践基地。这一荣誉不仅是对望繁信科技创新能力和技术实力的高度认可&#xff0c;也标志着公司在推动产学…...

编程日记 2024/8/20 1:21:12

Nginx--代理与负载均衡（扩展nginx配置7层协议及4层协议方法、会话保持）

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 一、代理原理 1、反向代理产生的背景 单个服务器的处理客户端&#xff08;用户&#xff09;请求能力有一个极限&#xff0c;当接入请求过多时&#…...

编程日记 2024/8/20 1:19:10

Ubuntu20.4 系统安装后无wifi图标

0. 问题排查 1.检查 BIOS 设置: 有时候&#xff0c;无线网卡可能在 BIOS 中被禁用。重启电脑&#xff0c;进入 BIOS 设置&#xff0c;确保无线网卡选项是启用的。 2.检查硬件开关: 检查您的笔记本电脑是否有物理开关或键盘快捷键来启用或禁用无线网卡。 3.在软件更新中切换…...

编程日记 2024/8/20 1:17:06

牛客网SQL进阶135 ：每个6/7级用户活跃情况

每个67级用户活跃情况_牛客题霸_牛客网 0 问题描述 基于用户信息表user_info、、试卷作答记录表exam_record、题目练习记录表practice_record&#xff0c;统计 每个6/7级用户总活跃月份数、2021年活跃天数、2021年试卷作答活跃天数、2021年答题活跃天数&#xff0c;结果 按照总…...

编程日记 2024/8/20 1:16:05

SQLite3使用接口写入二进制文件

使用接口的方式写入二进制文件 &#xff0c;有二种方案。 一、全部文件 一次性写下到数据中 使用sqlite3_bind_blob接口 FILE* fpfopen("user.bmp","rb"); iLenfread(buffer,1,65535,fp); fclose(fp);sqlite3_prepare(pDB,"insert into user values …...

编程日记 2024/8/20 1:14:55

在复杂的数据库架构中，如何优化 SQL 查询以提高性能和减少资源消耗？

在优化 SQL 查询以提高性能和减少资源消耗时&#xff0c;可以考虑以下几个方面&#xff1a; 使用索引&#xff1a;为经常被查询的列创建索引&#xff0c;可以大大加快查询速度。同时&#xff0c;避免过多的索引&#xff0c;因为过多的索引会增加写入操作的开销。 编写高效的查…...

编程日记 2024/8/20 1:12:53

【HarmonyOS】端云一体化初始化项目

简介 端云一体化开发是HarmonyOS对云端开发的支持、实现端云联动。云开发服务提供了云函数、云数据库、云存储等服务&#xff0c;可以使开发者专注于应用的业务逻辑开发&#xff0c;无需关注基础设施&#xff0c;例如&#xff1a;服务器、操作系统等问题。 因此&#xff0c;…...

编程日记 2024/8/20 1:11:52

LLM之KG：利用大语言模型(LLM)对文本语料提取概念和概念之间的语义关系进而实现自动构建知识图谱

LLM之KG：利用大语言模型(LLM)对文本语料提取概念和概念之间的语义关系进而实现自动构建知识图谱 目录 ML之KG：基于MovieLens电影评分数据集利用基于知识图谱的推荐算法(networkx+基于路径相似度的方法)实现对用户进行Top电影推荐案例 LLMs之AutoKG：《大型语言模型在知识图…...

编程日记 2024/8/20 1:09:50

Spring Security 6如何使用？

Spring Security 6 是一个功能强大且高度可定制的身份验证和访问控制框架&#xff0c;它专注于为基于Java的应用程序提供全面的安全解决方案。以下是对Spring Security 6的详细解析&#xff1a; 一、核心功能 身份验证&#xff08;Authentication&#xff09;&#xff1a; 验…...

编程日记 2024/8/20 1:06:46

PyTorch深度学习快速入门教程--学习笔记

目录 P4 PyCharm和Jupyter的对比 P5 PyTorch加载数据 P6 Dataset类代码实现 P7 Tensorboard 写日志 读取日志文件 Tensorboard 读图片 P10 Transforms使用 Transforms用途 常见的Transforms工具 P14 torchvision数据集使用 P15 Dataloader使用 P16 nn.Module模块使…...

编程日记 2024/8/20 1:05:45

SQLALchemy 分组过滤、子查询

SQLALchemy 分组过滤、子查询 分组和过滤（Group By Having）示例：使用ORM示例：使用SQLAlchemy Core子查询（Subquery）SQLAlchemy 是一个流行的 SQL 工具包和对象关系映射（ORM）库，用于 Python 应用程序。它允许你以 Pythonic 的方式使用 SQL 数据库，同时提供了强大的查询…...

编程日记 2024/8/20 1:04:44

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2026/2/8 6:37:39

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2026/2/8 20:42:48

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2026/1/26 21:57:45

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2026/1/30 4:16:26

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

微服务商城-商品微服务

数据表 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 商…...

编程新知 2026/1/29 18:30:30

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2026/1/31 12:52:29