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

Vue 3 官方 Hooks 的用法与实现原理

Vue 3 引入了 Composition API,使得生命周期钩子(hooks)在函数式风格中更清晰地表达。本篇文章将从官方 hooks 的使用、实现原理以及自定义 hooks 的结构化思路出发,全面理解 Vue 3 的 hooks 系统。


📘 1. Vue 3 官方生命周期 hooks 一览

Hook 函数触发时机
onBeforeMount组件挂载前
onMounted组件挂载后
onBeforeUpdate数据变更、视图更新前
onUpdated数据变更、视图更新后
onBeforeUnmount卸载前
onUnmounted卸载后
onActivated<KeepAlive> 激活时
onDeactivated<KeepAlive> 失活时
onErrorCaptured错误捕获
onRenderTracked响应式依赖追踪
onRenderTriggered响应式依赖触发更新

✅ 2. 使用示例

<script setup>
import { onMounted } from 'vue'onMounted(() => {console.log('组件已挂载完成')
})
</script>

<script setup> 中调用 hooks 更简洁,无需访问 setup() 返回对象。


🧠 3. 实现原理解析

生命周期 hooks 的注册基于当前组件实例 currentInstance

export function onMounted(hook: Function, target = currentInstance) {return injectHook('mounted', hook, target)
}

核心函数 injectHook

function injectHook(type: LifecycleHooks, hook: Function, target) {const hooks = target[type] || (target[type] = [])hooks.push(hook)
}

当组件进入对应生命周期阶段时,Vue 内部会遍历执行挂载在实例上的所有该类型 hook。


♻️ 4. 自定义 Hooks(组合逻辑复用)

Vue 3 鼓励将逻辑拆分为 useXxx 函数,以便跨组件复用。

🎯 示例:useWindowSize

// useWindowSize.ts
import { ref, onMounted, onUnmounted } from 'vue'export function useWindowSize() {const width = ref(window.innerWidth)const height = ref(window.innerHeight)const update = () => {width.value = window.innerWidthheight.value = window.innerHeight}onMounted(() => window.addEventListener('resize', update))onUnmounted(() => window.removeEventListener('resize', update))return { width, height }
}

使用方式:

<script setup>
import { useWindowSize } from '@/hooks/useWindowSize'const { width, height } = useWindowSize()
</script>

🧠 自定义 hooks 的原理

  • 本质是普通函数,内部调用 Vue 组合式 API(如 ref, watch, onMounted
  • 在组件 setup() 时执行,响应式变量挂接到当前组件上下文
  • 内部调用生命周期钩子时会依赖当前的 getCurrentInstance()

📌 5. 总结对比

类型示例作用特点
官方生命周期 HookonMounted()注册生命周期回调由 Vue 内部调度
自定义 HookuseMousePosition()封装响应式状态 + 逻辑复用是普通函数,可组合嵌套

📚 推荐阅读

  • Vue 3 官方生命周期 API
  • Vue 核心源码 Lifecycle 实现
  • VueUse - 高质量 Hooks 集合

✍️ 结语

生命周期 hooks 是 Vue 3 中非常核心的机制之一。理解它们的用法与实现,有助于我们编写结构清晰、逻辑可复用的组件。

如果你对 Vue 源码感兴趣,不妨进一步探索 Vue 是如何依赖 currentInstance 来处理作用域钩子的注册和调用的。

相关文章:

Vue 3 官方 Hooks 的用法与实现原理

Vue 3 引入了 Composition API&#xff0c;使得生命周期钩子&#xff08;hooks&#xff09;在函数式风格中更清晰地表达。本篇文章将从官方 hooks 的使用、实现原理以及自定义 hooks 的结构化思路出发&#xff0c;全面理解 Vue 3 的 hooks 系统。 &#x1f4d8; 1. Vue 3 官方生…...

通过现代数学语言重构《道德经》核心概念体系,形成一个兼具形式化与启发性的理论框架

以下是对《道德经》的数学转述尝试&#xff0c;通过现代数学语言重构其核心概念&#xff0c;形成一个兼具形式化与启发性的理论框架&#xff1a; 0. 基础公理体系 定义&#xff1a; 《道德经》是一个动态宇宙模型 U(D,V,Φ)&#xff0c;其中&#xff1a; D 为“道”的无限维…...

openai-whisper-asr-webservice接入dify

openai-whisper-asr-webservice提供的asr的api其实并不兼容openai的api&#xff0c;所以在dify中是不能直接添加到语音转文字的模型中&#xff0c;对比了下两个api的传参情况&#xff0c;其实只要改动一处&#xff0c;就能支持&#xff1a; openai兼容的asr调用中formdata中音频…...

曾经在知乎上看到一个回答:“入职做FPGA,后续是否还可以转数字IC设计?”

曾经在知乎上看到一个回答&#xff1a;“入职做FPGA&#xff0c;后续是否还可以转数字IC设计&#xff1f;” 对比FPGA的行业薪资水平&#xff0c;数字IC行业中的一些基础性岗位薪资比FPGA要高一些。 除了薪资之外&#xff0c;更多FPGA开发者考虑转向数字IC设计的原因如下&…...

第4周_作业题_逐步构建你的深度神经网络

文章目录 ***逐步构建你的深度神经网络***0. 背景0.1 要解决的问题0.2 作业大纲0.3 构建深层神经网络步骤 1. 导入包2. 初始化参数2.1 2层神经网络2.2 L层神经网络 3. 前项传播函数3.1 前项传播步骤3.2 线性前向3.3 线性激活部分3.4 L层前项传播模型3.5 计算成本 4. 反向传播模…...

Linux 搭建FTP服务器(vsftpd)

搭建FTP服务器(vsftpd)&#xff1a; 文章目录 搭建FTP服务器(vsftpd)&#xff1a;配置镜像安装vsftpd配置vsftpd关闭SELinux&#xff1a;配置防火墙启动vsfptd服务并设置开机自启创建FTP用户测试windows中测试Linux测试下载get/mget上传put/mput删除文件delete 搭建SCP服务器(基…...

AWS中国区中API Gateway中403的AccessDeniedException问题

问题 在互联网使用API Gateway的域名访问接口&#xff0c;出现403问题AccessDeniedException。具体如下&#xff1a; 前提 这里API Gateway相关配置都没有问题。而且&#xff0c;vpc内网都能访问被代理的服务。这里api gateway不需要使用自定义域名。 解决 向客服发个工单…...

计量单片机 RN8302:特性、使用与应用

在现代电力监测与能源管理领域&#xff0c;精确的电能计量至关重要。计量单片机 RN8302 作为一款高性能的电能计量芯片&#xff0c;凭借其卓越的特性与功能&#xff0c;在众多应用场景中发挥着关键作用。本文将全面深入地介绍 RN8302 的各项特性、使用方法、注意事项以及广泛的…...

Flutter生物识别认证之Flutter指纹认证Flutter人脸认证

Flutter介绍&#xff1a; Flutter是谷歌开发的开源UI软件开发工具包&#xff0c;用于高效构建跨平台的应用程序&#xff0c;支持iOS、Android、Web、Windows、macOS和Linux。它使用Dart语言编写&#xff0c;提供了丰富的组件和工具&#xff0c;使开发者能够创建高质量、高性能…...

了解Android studio 初学者零基础推荐(2)

在kotlin中编写条件语句 if条件语句 fun main() {val trafficLight "gray"if (trafficLight "red") {println("Stop!")} else if (trafficLight "green") {println("go!")} else if (trafficLight "yellow")…...

【Java Web】1.Maven

&#x1f4d8;博客主页&#xff1a;程序员葵安 &#x1faf6;感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb; 文章目录 一、初始Maven 1.1 什么是Maven 1.2 Maven的作用 二、Maven概述 2.1 Maven模型 2.2 Maven仓库 2.3 创建Maven项目 2.4 POM配置…...

【Spark集成HBase】Spark读写HBase表

Spark读写HBase表 摘要一、实验环境准备1. 技术版本2. Maven 依赖配置 二、实验步骤1. 数据准备2. HBase 表结构设计3. 代码实现3.1 数据写入 HBase&#xff08;writeDataToHBase 方法&#xff09;3.2 数据读取与分析&#xff08;readHBaseData 方法3.3 Spark SQL 分析3.4 完整…...

【Linux】借助gcc源码修改,搜索头文件当前进展

从上图可以看出对于每次的搜索&#xff0c;都是从第一个目录开始搜索&#xff0c;图里也可以看到修改源代码所在的目录&#xff0c;函数&#xff0c;行&#xff0c;昨天的博客感觉对于找到的位置还是不太好。 在使用修改源代码编译的GCC&#xff0c;进行编译内核源代码时&#…...

jmeter登录接口生成一批token并写入csv文件

背景&#xff1a;大部分项目真实的业务接口都是需要token鉴权的&#xff0c;想对一批核心业务接口进行并发压测&#xff0c;必然要先生成一批token给这些接口并发循环调用。 基本的思路是这样的&#xff1a;一批手机号csv文件 -》登录接口循环读取csv文件并生成token -》每次…...

利用 Redis 设计高效分布式锁机制:保障操作原子性

利用 Redis 设计高效分布式锁机制:保障操作原子性 引言 在分布式系统中,多个节点可能会同时操作共享资源,导致数据不一致或竞争条件问题。因此,构建一个高效的 分布式锁机制 是保障数据完整性的重要策略。 Redis 作为一个高性能的内存数据库,因其 单线程特性 和 丰富的数…...

Redis 的速度为什么这么快

这里的速度快&#xff0c;Redis 的速度快是与 MySQL 等数据库相比较的&#xff0c;与直接操作内存数据相比&#xff0c;Redis 还是略有逊色。 Redis 是一个单线程模型&#xff0c;为什么比其他的多线程程序还要快&#xff0c;原因有以几点&#xff1a; 1、访问的对象不同 Re…...

Spring Cloud Gateway高并发限流——基于Redis实现方案解析

本文是一个基于 Spring Cloud Gateway 的分布式限流方案&#xff0c;使用Redis Lua实现高并发场景下的精准流量控制。该方案支持动态配置、多维度限流&#xff08;API路径/IP/用户&#xff09;&#xff0c;并包含完整的代码实现和性能优化建议。 一、架构设计 #mermaid-svg-vg…...

【VScode】python初学者的有力工具

还记得23年11月&#xff0c;我还在欣喜Spyder像Rstudio一样方便。 但苦于打开软件打开太卡、太耗时&#xff08;初始化-再加载一些东西&#xff09;&#xff0c;一度耗费了我学习的热情。 就在24年5月份&#xff0c;别人推荐下发现了一个更加轻量级、方便又快速的ID&#xff0…...

融合蛋白质语言模型和图像修复模型,麻省理工与哈佛联手提出PUPS ,实现单细胞级蛋白质定位

蛋白质亚细胞定位&#xff08;subcellular localization of a protein&#xff09;是指蛋白质在细胞结构中具体的定位情况&#xff0c; 这对蛋白质行使其生物学功能至关重要。举个简单例子&#xff0c;如果把细胞想象成一个庞大的企业&#xff0c;其中细胞核、线粒体、细胞膜等…...

火山引擎火山云带宽价格

首先&#xff0c;成本结构方面&#xff0c;火山云可能用的是高质量的带宽资源&#xff0c;比如BGP多线网络&#xff0c;这种网络能保证更好的连通性和稳定性&#xff0c;但成本更高。另外&#xff0c;如果火山云的数据中心节点分布在多个地区&#xff0c;尤其是海外&#xff0c…...

可信计算是什么?可信逻辑:计算系统安全的形式化分析框架

参考书籍《人工智能安全 (陈左宁 主编&#xff1b;卢锡城 、方滨兴 副主编&#xff09;》第二章内容&#xff1b; 相关博客&#xff1a;可信执行环境(TEE)&#xff1a;保障数据安全的核心技术 文章目录 一、可信计算的逻辑学基础1.1 可信性的逻辑定义与范畴1.2 双体系架构的逻…...

大模型应用开发之Dify进阶版使用教程—react前端+django后端+dify-API制作聊天界面

Dify进阶使用教程 文章目录 Dify进阶使用教程前言一、dify-docker环境搭建及简单使用二、本篇使用API源码部署启动dify后端启动dify前端基于通义模型的智能客服机器人应用与自己项目联动实战1. 使用API进行项目与dify联动1.1 在控制台主页,点击创建访问API1.2 进入API页面,这…...

快速创建 Vue 3 项目

安装 Node.js 和 Vue CL 安装 Node.js&#xff1a;访问 https://nodejs.org/ 下载并安装 LTS 版本。 安装完后&#xff0c;在终端检查版本&#xff1a; node -v npm -v安装 Vue CLI&#xff08;全局&#xff09;&#xff1a; npm install -g vue/cli创建 Vue 3 项目 vue cr…...

【VLNs篇】05:TGS-在无地图室外环境中使用视觉语言模型进行轨迹生成和选择

栏目内容论文标题TGS: Trajectory Generation and Selection using Vision Language Models in Mapless Outdoor Environments (TGS&#xff1a;在无地图室外环境中使用视觉语言模型进行轨迹生成和选择)研究问题在具有非结构化越野特征&#xff08;如建筑物、草地、路缘&#x…...

【未来展望】云、AI与元宇宙的融合架构

未来展望:云、AI与元宇宙的融合架构 一、技术背景与发展:从独立演进到深度融合二、技术特点:异构协同与场景化适配三、技术细节:架构层解构与核心组件四、未来发展:技术趋势与产业机遇五、结语:硅基与碳基文明的共生演进一、技术背景与发展:从独立演进到深度融合 云计算…...

React+Taro 微信小程序做一个页面,背景图需贴手机屏幕最上边覆盖展示

话不多说 直接上图 第一步 import { getSystemInfoSync } from tarojs/taro;第二步 render() {const cardBanner getImageUrlByGlobal(member-merge-bg.png);const { safeArea, statusBarHeight } getSystemInfoSync();const NAV_BAR_HEIGHT 44;const navBarHeight NAV…...

Linux笔记---信号(下)

1. sigaction函数 #include <signal.h>int sigaction(int signum, const struct sigaction *act, struct sigaction *oldact); 功能&#xff1a;sigaction函数用于检查或修改与指定信号相关联的处理动作。它可以用来设置信号处理函数、信号掩码等。 参数 signum&#…...

腾讯云媒体AI解码全球视频出海智能密码

当短剧平台撞上多语种字幕困境&#xff0c;当直播电商遭遇文化审核危机&#xff0c;当经典影视困于格式壁垒——这些内容出海的难题&#xff0c;正被腾讯云媒体AI的智能引擎逐个破解。从东南亚的直播卡顿到中东的宗教符号雷区&#xff0c;从老片的低清画质到元宇宙的渲染瓶颈&a…...

Django的请求和响应+template模板

&#x1f31f; 如果这篇文章触动了你的心弦&#xff0c;请不要吝啬你的支持&#xff01; 亲爱的读者&#xff0c; 感谢你花时间阅读这篇分享。希望这里的每一个字都能为你带来启发或是让你会心一笑。如果你觉得这篇文章有价值&#xff0c;或者它解决了你一直以来的一个疑问&a…...

JAVA8怎么使用9的List.of

在 Java 8 中&#xff0c;List.of 方法并不可用&#xff0c;因为这是从 Java 9 开始引入的用于创建不可变列表的便捷方法。要在 Java 8 中达到类似的效果&#xff0c;您需要使用其他方式来创建列表。常规的方法是先创建集合对象然后再添加元素 List<String> list new A…...

无人机避障——深蓝学院浙大Ego-Planner规划部分

ESDF-free&#xff1a; 被这种类型的障碍物死死卡住的情况&#xff1a; 在一定范围内建立ESDF&#xff1a; Ego-Planner框架&#xff1a; 找到{p,v} pair&#xff1a; 【注意】&#xff1a;首先根据在障碍物内航迹上的点Q&#xff0c;以及与它相邻但不在障碍物内的两个点&#…...

Qt 最新版6.9.0使用MQTT连接腾讯云详细教程

Qt 最新版6.9.0使用MQTT连接腾讯云详细教程 一、MQTT介绍二、MQTT库编译1、源码下载2、源码编译 三、库的使用方法四、MQTT连接设备1、包含头文件 2、定义一个mqtt客户端3、实例并连接相关信号与槽4、连接服务器5、订阅topic 一、MQTT介绍 1. 概述 全称: Message Queuing Tel…...

无人机避障——深蓝学院浙大栅格地图以及ESDF地图内容

Occupancy Grid Map & Euclidean Signed Distance Field: 【注意】&#xff1a;目的是为了将有噪声的传感器收集起来&#xff0c;用于实时的建图。 Occupancy Grid Map&#xff1a; 概率栅格&#xff1a; 【注意】&#xff1a;由于传感器带有噪声&#xff0c;在实际中基于…...

Vitis 2021.1安装步骤

1.将压缩文件解压 2.打开解压后的文件夹&#xff0c;双击应用程序 3.安装版本2021.1&#xff0c;不安装2024.2&#xff0c;点击“continue”,然后点击“next” 4.选择“vitis”&#xff0c;然后点击“next” 5.点击“next” 6.选择“I Agree”&#xff0c;点击“next…...

【Harmony】【鸿蒙】List列表View如果刷新内部的自定义View

创建自定义View Component export struct TestView{State leftIcon?:Resource $r(app.media.leftIcon)State leftText?:Resource | string $r(app.string.leftText)State rightText?:Resource | string $r(app.string.rightText)State rightIcon?:Resource $r(app.med…...

我店模式系统开发打造本地生活生态商圈

在当今快节奏的商业环境中&#xff0c;商家们面临着越来越多的挑战&#xff0c;包括市场竞争加剧、消费者需求多样化以及运营效率的提高等。为了应对这些挑战&#xff0c;越来越多的商家开始寻求信息化解决方案&#xff0c;以提升运营效率和客户体验。我的店模式系统平台应运而…...

LeetCode[222]完全二叉树的节点个数

思路&#xff1a; 这个节点个数可以使用递归左儿子个数递归右儿子个数1&#xff0c;这个1是根节点&#xff0c;最后结果为节点个数&#xff0c;但我们没有练习到完全二叉树的性质. 完全二叉树的性质是&#xff1a;我简单说一下&#xff0c;大概就是其他节点都满了&#xff0c;就…...

电机试验平台:实现高效精密测试的关键工具

电机是现代工业中广泛应用的关键设备&#xff0c;其性能直接影响着生产效率和产品质量。为了确保电机的可靠运行和优化设计&#xff0c;电机试验平台成为不可或缺的工具。本文将探讨电机试验平台的概念、功能和应用&#xff0c;以及其在实现高效精密测试中的关键作用。 一、电…...

基于 ZigBee 的 LED 路灯智能控制器的设计

标题:基于 ZigBee 的 LED 路灯智能控制器的设计 内容:1.摘要 本文围绕基于 ZigBee 的 LED 路灯智能控制器展开研究。背景在于传统路灯控制方式存在能耗高、管理不便等问题&#xff0c;为实现路灯的智能化控制和节能目的&#xff0c;采用 ZigBee 无线通信技术来设计 LED 路灯智…...

LeetCode Hot100 (哈希)

1. 两数之和 比较简单&#xff0c;建立个map&#xff0c;看看有没有当前对应的相反的值就可以了 class Solution {public int[] twoSum(int[] nums, int target) {TreeMap<Integer, Integer> arrnew TreeMap<Integer, Integer>();int x10;int x20;for(int i0;i<…...

【力扣题目分享】二叉树专题(C++)

目录 1、根据二叉树创建字符串 代码实现&#xff1a; 2、二叉树的层序遍历 代码实现&#xff1a; 变形题&#xff1a; 代码实现&#xff1a; 3、二叉树的最近公共祖先 代码实现&#xff1a; 4、二叉搜索树与双向链表 代码实现&#xff1a; 5、从前序与中序遍历序列构…...

【烧脑算法】单序列双指针:从暴力枚举到高效优化的思维跃迁

目录 相向双指针 1498. 满足条件的子序列数目 1782. 统计点对的数目 581. 最短无序连续子数组 同向双指针 2122. 还原原数组 ​编辑 2972. 统计移除递增子数组的数目 II ​编辑 思维拓展 1920. 基于排列构建数组 442. 数组中重复的数据 448. 找到所有数组中消失的…...

如何排查服务器 CPU 温度过高的问题并解决?

服务器CPU温度过高是一个常见的问题&#xff0c;可能导致服务器性能下降、系统稳定性问题甚至硬件损坏。有效排查和解决服务器CPU温度过高的问题对于确保服务器正常运行和延长硬件寿命至关重要。本文将介绍如何排查服务器CPU温度过高的问题&#xff0c;并提供解决方法&#xff…...

YOLO篇-3.1.YOLO服务器运行

1.服务器 服务器网站&#xff1a;AutoDL算力云 | 弹性、好用、省钱。租GPU就上AutoDL(这个是收费的) 2.数据集上传 进入网站&#xff0c;租用自己的服务器&#xff0c;租用好后点击jupyter。(这里需要先有一个数据集哦) 在根目录下进入datasets创建自己的工程名 在工程文件下…...

数智读书笔记系列034《最优解人生》对编程群体的理念契合

📘 书籍简介 核心观点 《Die with Zero》(中文译为《最优解人生》)由美国对冲基金经理比尔柏金斯(Bill Perkins)撰写,核心理念是“财产归零”。其核心主张是: 金钱是实现体验的工具:金钱本身无意义,其价值在于转化为有意义的体验,如旅行、学习、家庭时光或慈善活动…...

深度学习相比传统机器学习的优势

深度学习相比传统机器学习具有显著优势&#xff0c;主要体现在以下几个方面&#xff1a; 1. 特征工程的自动化 传统机器学习&#xff1a;依赖人工设计特征&#xff08;Feature Engineering&#xff09;&#xff0c;需要领域专家从原始数据中提取关键特征&#xff08;如边缘检测…...

深入探究C++11的核心特性

目录 引言 C11简介 统一的列表初始化 1. {} 初始化 2. std::initializer_list 变量类型推导 1. auto 2. decltype 3. nullptr 右值引用和移动语义 1. 左值引用和右值引用 2. 左值引用与右值引用比较 3. 右值引用使用场景和意义 移动赋值与右值引用的深入应用 1. 移…...

nltk-英文句子分词+词干化

一、准备工作 ①安装好nltk模块并在&#xff1a; nltk/nltk_data: NLTK Data 链接中手动下载模型并放入到对应文件夹下。 具体放到哪个文件夹&#xff0c;先执行看报错后的提示即可。 ②准备pos_map.json文件&#xff0c;放置到当前文件夹下。该文件用于词性统一 {"…...

系统性能分析基本概念(3) : Tuning Efforts

系统性能调优&#xff08;Tuning Efforts&#xff09;是指通过优化硬件、软件或系统配置来提升性能&#xff0c;减少延迟、提高吞吐量或优化资源利用率。以下是系统性能调优的主要努力方向&#xff0c;涵盖硬件、操作系统、应用程序和网络等多个层面&#xff0c;结合实际应用场…...

部署TOMEXAM

前提&#xff1a;机器上有MySQL&#xff0c;nginx&#xff0c;jdk&#xff0c;tomcat 1.配置MySQL [rootjava-tomcat1 ~]# mysql -u root -pLiuliu!123 mysql: [Warning] Using a password on the command line interface can be insecure. Welcome to the MySQL monitor. C…...