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

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

news 2026/2/10 11:16:43

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

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2026/2/9 16:57:53

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/12/14 22:32:59

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2026/2/6 23:18:59

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2026/2/2 1:48:09

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2026/2/1 3:19:54

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2026/2/2 0:35:08

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2026/1/26 4:49:33

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

编程新知 2025/10/31 20:37:10