Vue 的生命周期钩子函数是什么？常见的生命周期钩子有哪些？
Vue 的生命周期钩子函数
Vue 的生命周期钩子函数是 Vue 组件在不同生命周期阶段自动调用的函数。生命周期分为创建、挂载、更新和销毁等阶段。理解这些钩子函数对于开发和调试 Vue 应用至关重要，因为它们使我们能够在组件生命周期的不同阶段执行特定的操作。
目录结构
- 什么是生命周期钩子函数？
- 常见的生命周期钩子函数
- 创建阶段
- 挂载阶段
- 更新阶段
- 销毁阶段
- 生命周期钩子的执行顺序
- 结合实际项目代码示例
- 示例 1：数据获取
- 示例 2：DOM 操作
- 示例 3：组件销毁时清理
- 总结
什么是生命周期钩子函数？
Vue 的生命周期钩子函数是在 Vue 实例的不同生命周期阶段被自动调用的方法。这些方法允许我们在特定的时间点执行某些操作，例如获取数据、处理事件、清理资源等。
Vue 生命周期包括四个主要阶段：
- 创建阶段：从 Vue 实例初始化到挂载前。
- 挂载阶段：从挂载前到 DOM 渲染后。
- 更新阶段：数据发生变化时，视图重新渲染。
- 销毁阶段：组件销毁时清理资源。
在这些阶段中，Vue 会自动调用不同的生命周期钩子。
常见的生命周期钩子函数
创建阶段
beforeCreate：在实例被创建之后，数据观测和事件/Watcher 配置之前调用。此时无法访问data和methods。created：实例创建完成后调用，此时已经完成数据观测和事件配置，可以访问数据、计算属性、方法等。
挂载阶段
beforeMount：在挂载开始之前被调用。此时el被解析，但是DOM尚未生成。mounted：在 Vue 实例挂载到 DOM 上之后调用。此时组件 DOM 渲染完成，可以进行 DOM 操作，如请求数据或初始化外部库。
更新阶段
beforeUpdate：数据变化后，DOM 更新之前调用。可以在此时对变化的数据做处理。updated：数据变化后，DOM 更新完成时调用。
销毁阶段
beforeDestroy：组件实例销毁之前调用。此时，组件的data、methods、watchers仍然可以访问，但视图已经销毁。destroyed：组件实例销毁后调用。此时，所有的绑定和事件监听都会被清除。
生命周期钩子的执行顺序
- beforeCreate -> created
- beforeMount -> mounted
- 数据更新：beforeUpdate -> updated
- beforeDestroy -> destroyed
结合实际项目代码示例
示例 1：数据获取
假设我们在 Vue 组件中需要获取远程数据，可以使用 created 钩子来进行 API 请求。
<template><div><h1>{{ title }}</h1><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul></div>
</template><script>
export default {data() {return {title: 'Item List',items: []};},created() {// 在组件创建后，发起数据请求this.fetchData();},methods: {async fetchData() {const response = await fetch('https://api.example.com/items');const data = await response.json();this.items = data;}}
};
</script>
解释：
created生命周期钩子被用来在组件实例创建后获取数据。在fetchData方法中，我们使用async和await来从远程 API 获取数据，并将数据赋值给items，从而更新视图。
示例 2：DOM 操作
如果需要在组件渲染完成后执行某些 DOM 操作，我们可以利用 mounted 钩子。
<template><div><button ref="myButton" @click="handleClick">Click Me</button></div>
</template><script>
export default {mounted() {// 组件挂载完成后，直接操作 DOMthis.$refs.myButton.focus();},methods: {handleClick() {alert('Button clicked!');}}
};
</script>
解释：
- 在
mounted钩子中，组件的 DOM 已经渲染完毕，因此我们可以安全地访问 DOM 元素（通过$refs）并执行 DOM 操作，例如聚焦按钮。
示例 3：组件销毁时清理
如果组件包含定时器或事件监听器等资源，在组件销毁时应清理这些资源，防止内存泄漏。
<template><div><h1>{{ message }}</h1></div>
</template><script>
export default {data() {return {message: 'Hello, Vue!'};},mounted() {// 模拟定时器this.timer = setInterval(() => {console.log('Timer running...');}, 1000);},beforeDestroy() {// 组件销毁之前清理定时器clearInterval(this.timer);}
};
</script>
解释：
- 在
mounted钩子中，我们启动了一个定时器。在beforeDestroy钩子中，我们清除了定时器，以防止在组件销毁后继续运行，避免内存泄漏。
总结
Vue 的生命周期钩子函数为开发者提供了在不同阶段执行代码的能力。通过合理使用这些钩子函数，我们可以控制组件的数据获取、事件处理、DOM 操作以及清理资源等操作，从而提高应用的性能和稳定性。
理解 Vue 的生命周期钩子及其执行顺序是开发高效 Vue 应用的关键。希望通过上述示例，你能更好地理解和掌握 Vue 的生命周期钩子函数。
相关文章：
Vue 的生命周期钩子函数是什么？常见的生命周期钩子有哪些？
Vue 的生命周期钩子函数 Vue 的生命周期钩子函数是 Vue 组件在不同生命周期阶段自动调用的函数。生命周期分为创建、挂载、更新和销毁等阶段。理解这些钩子函数对于开发和调试 Vue 应用至关重要，因为它们使我们能够在组件生命周期的不同阶段执行特定的操作。 目录…...
uniapp中导入uview或者uview plus
关于SCSS uview-plus依赖SCSS，您必须要安装此插件，否则无法正常运行。 如果您的项目是由HBuilder X创建的，相信已经安装scss插件，如果没有，请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安…...
3D 生成重建017-StyleGaussian用文本或图像对你的3DGS内容进行风格迁移
3D 生成重建017-StyleGaussian用文本或图像对你的3DGS内容进行风格迁移 文章目录 0 论文工作1 论文方法2 实验结果 0 论文工作 论文 “StyleGaussian: Instant 3D Style Transfer with Gaussian Splatting” 介绍了一种新颖的3D风格迁移方法 StyleGaussian，该方法通…...
【adb】iqoo系统精简垃圾内置应用
免责声明 这个得谨慎点，虽然我验证过两部手机和不同版本的系统，但是总会有特殊的存在、 本教程来自于互联网搜集整理， 按照本教程造成的用户设备硬件或数据损失，本人概不承担任何责任，如您不同意此协议，请不…...
Golang 字符串字面量表示方法
文章目录 1.普通字符串字面量（Double-Quoted String Literals）2.原始字符串字面量（Raw String Literals）3.字节字符串字面量（Byte Slice Literals）4.码值表示字符串字面量Unicode 转义序列UTF8 转义序列十六…...
【uni-app 微信小程序】新版本发布提示用户进行更新
知识准备 uni.getUpdateManager文档介绍 不支持APP与H5，所以在使用的时候要做好平台类型的判断，如何判断，参考条件编译处理多端差异 代码参考 export const updateApp () > {const updateManager uni.getUpdateManager()updateManag…...
Leetcode 739-每日温度
请根据每日 气温 列表 temperatures ，请计算在每一天需要等几天才会有更高的温度。如果气温在这之后都不会升高，请在该位置用 0 来代替。 题解（单调递减栈） 什么时候用单调栈呢？ 通常是一维数组，要寻找任…...
Gitee配置以及如何将本地项目提交到远程仓库
文章目录 准备远程仓库配置注册新建仓库 配置git 生成ssh，输入以下命令，然后连敲三次回车键配置公钥本地代码上传 准备 1.本地下载git 2.注册远程仓库账号 远程仓库配置 注册 官网：https://gitee.com 完成注册 新建仓库 头像->设置-…...
爬虫项目基础知识详解
文章目录 Python爬虫项目基础知识一、爬虫与数据分析1.1 Python中的requests库Requests 库的安装Requests 库的 get() 方法爬取网页的通用代码框架HTTP 协议及 Requests 库方法Requests 库主要方法解析 1.2 python中的json库1.3 xpath学习之python中lxml库html了解html结构html…...
【Leetcode Top 100 - 扩展】876. 链表的中间结点
问题背景 给你单链表的头结点 h e a d head head，请你找出并返回链表的中间结点。 如果有两个中间结点，则返回第二个中间结点。 数据约束 链表的结点数范围是 [ 1 , 100 ] [1, 100] [1,100] 1 ≤ N o d e . v a l ≤ 100 1 \le Node.val \le 100 1≤…...
)
16-01、JVM系列之：内存与垃圾回收篇(一)
JVM系列之：内存与垃圾回收篇（一） ##本篇内容概述： 1、JVM结构 2、类加载子系统 3、运行时数据区之：PC寄存器、Java栈、本地方法栈一、JVM与JAVA体系结构 JAVA虚拟机与JAVA语言并没有必然的联系，它只是与特…...
经典蓝牙（BT/EDR）蓝牙配对与连接
经典蓝牙的连接过程包括跳频，扫描，配置交换等过程。对ACL链路以及sco的连接过程也做详细的分析。 1. 为什么不配对便无法建立连接？ 任何无线通信技术都存在被监听和破解的可能，蓝牙SIG为了保证蓝牙通信的安全性，采用…...
用 Python 从零开始创建神经网络（十四）：L1 和 L2 正则化（L1 and L2 Regularization）
L1 和 L2 正则化（L1 and L2 Regularization） 引言1. Forward Pass2. Backward pass到此为止的全部代码： 引言 正则化方法旨在降低泛化误差。我们首先讨论的正则化形式是L1正则化和L2正则化。L1和L2正则化用于计算一个数值（称为惩…...
特殊的数学性质
一个数模9的结果等于它的每一位数相加和模9...
最长递增子序列＆什么是继承性？C++中如何实现继承？继承的好处和注意事项有哪些？
最长递增子序列 方法一：暴力二维dp，初始状态：每个元素至少和自己构成一个上升序列，大小为1，状态转移：找到前面结尾数字小于当前数组元素的最长序列，当前位置的长度就是lenpre1. class Solutio…...
汽车IVI中控开发入门及进阶（三十五）：架构QML App Architecture Best Practices
在Qt/QML工程的架构中，架构很重要，虽然本身它有分层，比如QML调用资源文件（图片等）显示GUI界面，后面的CPP文件实现界面逻辑，但是这个分类还有点粗。在实际开发中，界面逻辑也就是基于类cpp的实现，也开始使用各种面向对象的设计模式，实现更加优秀的开发架构，这点尤其在…...
面试题整理（二）
芯冰乐知识星球入口：芯冰乐...
编码及其代码
编码 形成文字所需bit点------有相应代号（编码---有好多种8/16/24/32）都已提前形成好，放哪哪就会形成那个文字 同一个文字在不同编码存的码不一样 用一种编码存的话，如果用另一种编码解析就会出现乱码 Windows默认编码为ANSI …...
python selenium（4+）+chromedriver最新版 定位爬取嵌套shadow-root（open）中内容
废话不多说，直接开始 本文以无界作为本文测试案例，抓取shadow-root（open）下的内容 shadow Dom in selenium： 首先先讲一下shadow Dom in selenium 版本的区别，链接指向这里 在Selenium 4版本 以及 chrom…...
AutoClass加载预训练实例
AutoClass 由于 Transformer 架构种类繁多，AtuoClass可以创建一个你想要的做模型架构。作为 🤗 Transformer 核心理念的一部分，使库易于使用、简单且灵活，可以AutoClass从给定的检查点自动推断和加载正确的架构。该from_pretrain…...
在 CentOS 上安装 NFS 服务器
文章目录 1. 在 CentOS 上安装 NFS 服务器1.1 安装 NFS 服务器软件包1.2 配置 NFS 共享目录1.3 配置 NFS 导出文件1.4 启动并启用 NFS 服务1.5 导出共享目录1.6 配置防火墙1.7 检查 NFS 状态 2. 在 CentOS 上安装 NFS 客户端2.1 安装 NFS 客户端软件包2.2 挂载 NFS 共享2.3 配置…...
utf8mb4_unicode_ci、utf8mb4_general_ci、utf8mb4_0900_ai_ci； Mysql 排序字符集的优缺点和选择
标题内容 Mysql的排序字符集真让人头疼，如果两个表的排序字符集不一致，还会导致在进行字段比较的时候直接报错。下面分析几个常用的字符集的优劣和选择。 utf8mb4_unicode_ci 特点 Unicode 标准兼容性高：它是基于 Unicode 标准的排序规则&a…...
星宸SSC8836Q/SSC8836Q-H
SSC8836Q产品是高度集成的多媒体片上系统(SoC)产品，适用于汽车和运动/运动相机等高分辨率智能视频录制和播放应用。 该芯片包括64位双核RISC处理器，先进的图像信号处理器(ISP)，高性能的H.265/H。264/MJPEG视频编解码器，智能处理单…...
rk3576 , android14 , 编译， 卡死，android.bp , ninja
问题：我在 编译 ａｎｄｒｏｉｄ１４ 的时候， 卡死再 analysing android.bp 这里 ，卡了 3，4 个小时。肯定是有问题的。 如图&…...
3、.Net UI库：MaterialSkin - 开源项目研究文章
MaterialSkin 是一个开源的 WinForms 第三方库，提供了许多仿谷歌设计风格的组件，使得 WinForms 窗体程序更加美观。以下是 MaterialSkin 的一些关键特点和使用方法： 主要特点： 仿谷歌设计风格：MaterialSkin 提供了大量…...
2024年构建PHP应用开发环境
文章目录 前言选择合适的PHP版本安装与配置PHP环境Windows平台Linux平台macOS平台 集成Web服务器数据库连接与管理使用Composer进行依赖管理调试工具的选择代码质量管理部署与持续集成安全性考虑参考资料结语 前言 随着互联网的发展，PHP作为一门成熟的服务器端编程…...
苹果手机iPad投屏到安卓电视，不只有AirPlay一种方法，还可以无线远程投屏！
苹果品牌的设备一般都可以使用airplay功能，将一个屏幕投射到另一个屏幕上。如果是跨品牌或跨系统投屏，airplay就未必能够适应。 提供无线投屏和airplay投屏两种方式的AirDroid Cast已经推出TV版本。苹果手机或iPad可以选择无线（远程ÿ…...
什么是内网什么是外网？区别是什么
内网和外网是计算机网络中的两个基本概念，它们在定义、特点和使用场景上有显著的区别。虎观代理小二将带大家详细了解内网与外网的定义以及它们之间的主要差异，帮助读者更好地理解和应用这两种网络。 内网（局域网，LAN࿰…...
基于Springboot+Vue的在线答题闯关系统
基于SpringbootVue的在线答题闯关系统 前言：随着在线教育的快速发展，传统的教育模式逐渐向互联网教育模式转型。在线答题系统作为其中的一个重要组成部分，能够帮助用户通过互动式的学习方式提升知识掌握度。本文基于Spring Boot和Vue.js框架&…...
html css 图片背景透明
html css图标背景透明 css属性： background-color:transparent; mix-blend-mode: multiply; 完整HTML代码： <html><head><title>Test</title></head><body><div id"test" style"background-col…...
Servlet
一 Servlet Servlet (server applet) 是运行在服务端(tomcat)的Java小程序，是sun公司提供一套定义动态资源规范; 从代码层面上来讲Servlet就是一个接口 用来接收、处理客户端请求、响应给浏览器的动态资源。在整个Web应用中，Servlet主要负责接收处理请求…...
MySQL用法---MySQL Workbench创建数据库和表
1. 连接数据库 打开软件，点击左下角卡片，输入设置的数据库密码，勾选单选框 2. 了解主页面的组成部分 3. 创建数据库 先点击工具栏的创建按钮 再输入数据库名称 点击 Apply 创建 4. 创建数据表 展开数据库，在Tables上右键&…...
WordPress Elementor Page Builde 任意文件读取漏洞复现（CVE-2024-9935）
0x01 产品描述： WordPress Elementor Page Builder 是一款 WordPress 插件，它允许用户以可视化方式创建和编辑网页。0x02 漏洞描述： WordPress 的 Elementor Page Builder 插件的 PDF 生成器插件在 1.7.5 之前的所有版本中都容易受到路径遍历的攻击，包括 1.7.5 rtw_pgaepb_…...
静态链接和动态链接的特点
静态链接 链接方式：在编译时，所有依赖的库代码被直接打包到生成的可执行文件中。这意味着在程序运行时，不需要再加载任何外部库文件。 优点： 独立性强：生成的可执行文件可以在没有依赖库的系统上直接运行&am…...
)
内核流对象(Kernel Streaming Objects)
内核流对象(Kernel Streaming Objects)是 Windows 系统中用于处理音频、视频等流媒体数据的重要机制。让我详细解释其作用和主要组件： 1. 主要作用： c // 内核流的核心功能 - 音频/视频数据的实时处理 - 多媒体设备驱动开发 - 硬件与软件之间的数据流传…...
Java 在Json对象字符串中查找和提取特定的数据
1、在处理JSON数据时，需要提出个别字段的值，通过正则表达式提取特定的数据 public static void main(String[] args) {//定义多个JSON对象字符串类型，假设每个对象有a,b,c 字段String strJson "{\"a\":1.23,\"b\"…...
21、结构体成员分布
结构体中的成员并不是紧挨着分布的，内存分布遵循字节对齐的原则。 按照成员定义的顺序，遵循字节对齐的原则存储。 字节对齐的原则： 找成员中占据字节数最大的成员，以它为单位进行空间空配 --- 遇到数组看元素的类型 每一个成员距离…...
【深度学习】四大图像分类网络之ResNet
ResNet网络是在2015年由微软实验室中的何凯明等几位提出，在CVPR 2016发表影响深远的网络模型，由何凯明团队提出来，在ImageNet的分类比赛上将网络深度直接提高到了152层，前一年夺冠的VGG只有19层。斩获当年ImageNet竞赛中分类任务第…...
zookeeper学习
解决什么问题？ 首先来分析下业务对象，才能对解决的问题进行归纳和总结。它解决的事分布式应用的问题，那么分布式应用会存在哪里问题是由它的业务特性来决定的，这些问题已是为了解决业务的问题。分布式的业务特征有哪些࿱…...
Monkey结合appium模拟操作特定界面
目录 1. 使用 Monkey 操作特定界面（通过UI标识来限制） 2. 结合 uiautomator 或 appium 定位特定元素 步骤： 3. 使用 Monkey Appium 控制特定界面点击 4. 如何结合 Appium 与 Monkey 5. 限制 Monkey 只点击固定界面上的元素 使用 --pc…...
智能指针【C++11】
文章目录 智能指针std::auto_ptr std::unique_ptrstd::shared_ptrstd::shared_ptr的线程安全问题std::weak_ptr 智能指针 std::auto_ptr 管理权转移 auto_ptr是C98中引入的智能指针，auto_ptr通过管理权转移的方式解决智能指针的拷贝问题，保证一个资源…...
plsql 执行存储过程 SYS_REFCURSOR
关键字：plsql 执行存储过程 SYS_REFCURSOR 在PL/SQL中，SYS_REFCURSOR是一种特殊的数据类型，用于表示引用游标，可以用来返回查询结果或者操作数据库中的结果集。 以下是一个使用SYS_REFCURSOR执行存储过程的例子： CR…...
)
git修改某次commit(白痴版)
第一步 在bash窗口运行 git rebase --interactive commitId^ 比如要改的commitId是 abcedf git rebase --interactive abcedf^键盘 按 i 或者 ins 进入编辑状态 进入insert 编辑状态 在bash窗口手动把对应commit前面的pick改为e或edit 按 esc 进入退出程序 输入 :wq 保存退出…...
设计模式：19、桥接模式
目录 0、定义 1、桥接模式的四种角色 2、桥接模式的UML类图 3、示例代码 0、定义 将抽象部门与实现部分分离，使它们都可以独立地变化。 1、桥接模式的四种角色 抽象（Abstraction）：一个抽象类，包含实现者…...
闭包函数的基础知识
上期文章 1. 函数装饰器 2.闭包 2.1变量作用域 python有3种变量作用域 模块全局作用域:在类或函数外部分配定义的。函数局部作用域:通过参数或者在函数主体中定义的。第3种作用域:闭包中的变量环境 2.2全局变量和局部变量 def fun(a):print(a)print(b)fun(10)10---------…...
python3D圣诞树
import pygame import math from pygame.locals import *# 初始化Pygame pygame.init()# 设置屏幕尺寸和标题 width, height 800, 600 screen pygame.display.set_mode((width, height)) pygame.display.set_caption(3D 圣诞树)# 设置颜色 GREEN (34, 139, 34) BROWN (139,…...
博物馆导览系统方案（一）背景需求分析与核心技术实现
维小帮提供多个场所的室内外导航导览方案，如需获取博物馆导览系统解决方案可前往文章最下方获取，如有项目合作及技术交流欢迎私信我们哦~撒花！ 一、博物馆导览系统的背景与市场需求 在数字化转型的浪潮中，博物馆作为文化传承和知…...
[代码随想录09]字符串2的总结
前言 处理字符串主要是有思路，同时总结方法。 题目链接 151. 反转字符串中的单词 - 力扣（LeetCode） 55. 右旋字符串（第八期模拟笔试） 一、翻转字符串里的单词 这个题目的主要思路，代码采用从后往前遍历字…...
C语言程序设计P5-3【应用函数进行程序设计 | 第三节】——知识要点：函数的嵌套调用和递归调用
知识要点：函数的嵌套调用和递归调用 视频 目录 一、任务分析 二、必备知识与理论 三、任务实施 一、任务分析 本任务要求用递归法求 n!。 我们知道n!n(n-1)(n-2)……1n(n-1)!递归公式为： 1.上面公式分解为n!n(n-1)!，即将求n!的问题变为…...
【Java】protobuf-maven-plugin主动下载protoc编译proto文件
背景： 我们hadoop的代码里，配置的是3.7.1的protocol buffer，但是编译环境上安装的是2.5.0。 能成功编译，且没有什么兼容性问题。这里非常好奇发生了什么，于是研究了一下protobuf-maven-plugin插件， 发现是他去下载的 在使用protobuf-maven-plugin插件时，我们一般会这么…...