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

Vue3的Composition API与React Hooks有什么异同？

news 来源：原创 2025/9/16 14:17:29

Vue3的一个重大更新点就是支持Composition API，而且也被业界称为hooks，那么Vue3的“Hooks”与React的Hooks有这么区别呢？

一、核心相似点

1. 逻辑复用与代码组织

都解决了传统类组件或选项式 API 中逻辑分散的问题，允许将相关逻辑聚合在一起。

示例：

// Vue3 Composition API
const useCounter = () => {const count = ref(0);const increment = () => count.value++;return { count, increment };
};// React Hooks
const useCounter = () => {const [count, setCount] = useState(0);const increment = () => setCount(c => c + 1);return { count, increment };
};

2. 函数式编程范式

均支持在函数式组件中管理状态和副作用，减少对类组件的依赖。

3. 状态管理灵活性

提供细粒度的状态管理能力，避免全局状态污染。

二、核心差异点

维度	Vue3 Composition API	React Hooks
响应式系统	基于 Proxy 的自动依赖追踪	依赖手动触发更新（如 `setState`）
生命周期管理	显式生命周期钩子（如 `onMounted`）	通过 `useEffect` 模拟，依赖数组控制执行时机
执行模型	`setup` 函数仅执行一次	函数组件每次渲染都会重新执行所有 Hooks
逻辑复用机制	组合式函数返回响应式对象	Hooks 返回状态和函数，需遵守规则（如顺序调用）
副作用管理	`watch`/`watchEffect` 自动追踪依赖	`useEffect` 需手动声明依赖数组
闭包陷阱	无（Proxy 自动追踪最新值）	需注意过时闭包问题（依赖数组未正确声明时）
TypeScript 支持	天然集成响应式类型	需显式声明类型（如 `useState<number>()`）

三、详细对比分析

1. 响应式系统实现

Vue3：基于 Proxy 的响应式系统自动追踪依赖，数据变化触发精确更新。

const state = reactive({ count: 0 });
watchEffect(() => console.log(state.count)); // 自动追踪 state.count

React：依赖状态更新函数，需手动触发重新渲染。

const [count, setCount] = useState(0);
useEffect(() => console.log(count), [count]); // 手动声明依赖

2. 生命周期与副作用

Vue3：明确分离的生命周期钩子（如 onMounted）。
- ```
onMounted(() => fetchData());
```

React：统一通过 useEffect 管理，依赖数组控制执行。

useEffect(() => {fetchData();return () => cleanup(); // 清理函数
}, [dependency]);

3. 闭包问题与状态更新

Vue3：响应式数据始终引用最新值，无过时闭包问题。

React：依赖数组未更新时，闭包可能捕获旧值。

const [count, setCount] = useState(0);
useEffect(() => {const timer = setInterval(() => {console.log(count); // 可能捕获初始化时的 count=0}, 1000);return () => clearInterval(timer);
}, []); // 依赖数组为空，count 不更新

4. TypeScript 集成

Vue3：响应式对象自动推断类型。

const state = reactive({ count: 0 }); // 自动推断为 { count: number }

React：需显式声明类型。

const [count, setCount] = useState<number>(0);

Vue3的Composition API与React Hooks有什么异同？

Vue3的一个重大更新点就是支持Composition API，而且也被业界称为hooks，那么Vue3的“Hooks”与React的Hooks有这么区别呢？ 一、核心相似点 1. 逻辑复用与代码组织都解决了传统类组件或选项式 API 中逻辑分散的问题，允许将相关逻…...

编程日记 2025/9/16 14:17:29

Gerrit的安装与使用说明（Ubuntu）

#本页面按192.168.60.148服务器举例进行安装配置 1.权限配置 ## 使用root或者有sudo权限用户执行 # 创建gerrit用户 sudo useradd gerrit # 设置gerrit用户的密码 sudo passwd gerrit # 增加sudo权限 sudo visudo 在root ALL(ALL:ALL) ALL行下添加如下内容 gerrit ALL(ALL:…...

编程日记 2025/9/15 16:45:59

如何在Git历史中抹掉中文信息并翻译成英文

如何在Git历史中抹掉中文信息并翻译成英文在软件开发和版本控制领域，维护一个清晰、一致的代码历史记录是至关重要的。然而，有时我们可能会遇到需要修改历史提交的情况，比如删除敏感信息或修正错误。本文将详细探讨如何在Git历史中抹掉中文…...

编程日记 2025/9/11 17:26:09

Ubuntu利用docker将ONNX模型转换为RK3588模型

1.安装docker 下载教程 1.拉取镜像方法一：通过命令拉取 # 下载官方Docker镜像sudo docker pull registry.cn-hangzhou.aliyuncs.com/rockchip/rknn-toolkit2:v2.3.0 方法二：通过rknn-toolkit2自带的直接安装 2.开始工作创建工作目录并复制ONNX模型…...

编程日记 2025/9/7 1:26:05

Go：入门

文章目录 Hello, World命令行参数找出重复行GIF动画获取一个URL并发获取多个URL一个 Web 服务器其他 Hello, World Hello world package main import "fmt" func main() {fmt.Println("Hello, 世界") }package main表明这是一个可独立执行的程序包&#…...

编程日记 2025/9/10 19:55:56

深入理解 ResponseBodyAdvice 及其应用

ResponseBodyAdvice 是 Spring MVC 提供的一个强大接口，允许你在响应体被写入 HTTP 响应之前对其进行全局处理。下面我将全面介绍它的工作原理、使用场景和最佳实践。基本概念接口定义 public interface ResponseBodyAdvice<T> {boolean supports(Metho…...

编程日记 2025/9/12 13:31:31

SpringBoot对接火山引擎大模型api实现图片识别与分析

文章目录一、前言二、创建应用三、后端1.SDK集成2.调用Rest API 四、前端一、前言 Spring AI实战初体验——实现可切换模型AI聊天助手-CSDN博客如上，在上一篇博客，我们已经实现了spring ai对接本地大模型实现了聊天机器人，但是目前有个新…...

编程日记 2025/9/10 1:27:25

Java ---成员，局部变量与就近原则

成员变量声明在类内部，但在方法、构造器或代码块之外的变量。属于类的实例（对象）或类本身（静态变量）。实例变量（非静态成员变量）： public class Person {private String name…...

编程日记 2025/9/11 19:04:25

基于libevent写一个服务器（附带源码）

使用libevent搭建服务器服务器源码二级目录使用开源框架，目的是减少程序员对一些精细的操作的误操作，也是为了让程序员能更好的对接业务而不是底层api的使用。为何使用libevent，因为libevent开源已经有十几年了，能很好的承受数…...

编程日记 2025/9/13 4:57:17

2.2.3 Spark Standalone集群

搭建Spark Standalone集群需要完成多个步骤。首先，配置主机名、IP地址映射、关闭防火墙和SeLinux，并设置免密登录。接着，配置JDK和Hadoop环境，并在所有节点上分发配置。然后，下载并安装Spark，配置环境变量和…...

编程日记 2025/9/11 21:52:02

每天记录一道Java面试题---day38

说说类加载器双亲委派模型回答重点 AppClassLoader的父加载器是ExtClassLoader，ExtClassLoader的父加载器是BootStrapClassLoader。JVM在加载一个类时，会调用AppClassLoader的laodClass方法来加载这个类，不过在这个方法中，会先…...

编程日记 2025/9/10 1:27:27

[ctfshow web入门] web33

信息收集相较于上一题，这题多了双引号的过滤。我猜测这一题的主要目的可能是为了不让使用$_GET[a]之类的语句，但是$_GET[a]也是一样的没有括号可以使用include，没有引号可以使用$_GET 可以参考[ctfshow web入门] web32，其中的所…...

编程日记 2025/9/9 1:32:08

【时时三省】(C语言基础)用switch语句实现多分支选择结构

山不在高，有仙则名。水不在深，有龙则灵。 ----CSDN 时时三省 if语句只有两个分支可供选择，而实际问题中常常需要用到多分支的选择。例如，学生成绩分类(85分以上为A等，70 ~ 84分为B等，60 ~ 69分为C等)&…...

编程日记 2025/9/16 6:12:33

为您的 Web 应用选择最佳文档阅读器

为显示选择合适的文档查看器是开发 Web 应用过程中至关重要的一步。文档查看器应能在提供功能性的同时，确保用户体验的流畅性。开发人员必须评估多种因素，以确保效率、性能和兼容性。本文将帮助您了解影响用户文档浏览体验成功与否的关键指标。渲染质…...

编程日记 2025/9/5 4:01:25

js逆向入门图灵爬虫练习平台第六题

地址：aHR0cHM6Ly9zdHUudHVsaW5ncHl0b24uY24vcHJvYmxlbS1kZXRhaWwvNi8 观察可以发现请求头有有字段加密和响应结果加密查看启动器开始断点调试直接复制里面的js内容，测试函数...

编程日记 2025/8/17 20:39:41

招商蛇口 | 回归生活本身，革新CID的143㎡改善标准

时光流转，城市向前。在西安这片千年文脉的沃土之上，招商蛇口已深耕11载，用21座标杆作品，为17000余户家庭筑就理想栖居。从曲江到高新，从城市更新到人居焕新，每一座作品都是对“美好生活承载者”使命的践行。…...

编程日记 2025/9/11 1:15:03

第6课：分布式多智能体系统架构

分布式多智能体系统架构：从算力协同到微服务部署的工程化实践一、引言：当智能体规模突破百级：分布式架构为何成为必选项？ 在多智能体系统（MAS）从“实验室Demo”走向“工业级应用”的过程中，传…...

编程日记 2025/9/16 6:42:52

Vue3 Teleport 深度解析与面试技巧

Vue3 Teleport 深度解析与面试技巧一、Teleport 核心价值解析 1.1 诞生背景与设计哲学 DOM层级困境：传统组件树与视觉层级的矛盾样式污染问题：z-index层级管理的世纪难题逻辑解耦需求：业务逻辑与DOM结构的正交性要求 1.2 核心能力矩阵能…...

编程日记 2025/9/16 1:57:35

断言与反射——以golang为例

断言 x.(T) 检查x的动态类型是否是T，其中x必须是接口值。简单使用 func main() {var x interface{}x 100value1, ok : x.(int)if ok {fmt.Println(value1)}value2, ok : x.(string)if ok {//未打印fmt.Println(value2)} }需要注意如果不接受第二个参数就是OK,这…...

编程日记 2025/9/15 11:16:50

react函数组件中，className字符串、style对象如何在父子组件之间传递

一、需要传递的样式在父组件的scss文件中提前写好子组件的dom解析后： 二、向子组件直接传递style对象...

编程日记 2025/8/17 20:20:17

WHAT - React Portal 机制：将子组件渲染到 DOM 的指定节点

文章目录适合场景基本语法示例：Modal 弹窗1. 创建一个简单的 Modal.tsx2. 在 App 中使用为什么要用 Portal？TypeScript 中 Portal 类型定义？ 适合场景 React Portal 是 React 提供的一种机制，让你可以将子组件渲染到 DOM 的指定…...

编程日记 2025/9/10 18:17:29

企业绿电消纳比例不达标？安科瑞微电网智慧能源平台助力企业低碳转型

方案配置支持请联系安科瑞电气周女士企业绿电消纳政策是国家推动能源转型和实现“双碳”目标的重要抓手，近年来政策体系逐步完善。企业通过建设“源网荷储”一体化项目、虚拟电厂等技术，提升绿电消纳能力。一、安科瑞提供解决方案深耕用电业务&…...

编程日记 2025/9/11 12:16:35

uni-app初学

文章目录 1. pages.json 页面路由2. 图标3. 全局 CSS4. 首页4.1 整体框架4.2 完整代码4.3 轮播图 swiper4.3.1 image 4.4 公告4.4.1 uni-icons 4.5 分类 uni-row、uni-col4.6 商品列表小程序开发网址： 注册小程序账号微信开发者工具下载 uniapp 官网 HbuilderX 下…...

编程日记 2025/9/10 5:47:18

网络划分vlan隔离

隔离划分比如我们想要将pc1和pc2隔离，我们只需在lsw1交换机中，如下配置： sys 先进入系统视图先后输入代表创建2个隔离区 vlan 10 vlan 20 然后进入0/0/1、0/0/2设置隔离类型，并划分隔离区域 int gi0/0/01 port l…...

编程日记 2025/9/12 16:10:28

HDCP（四）

HDCP驱动开发实战深度解析以下从协议栈架构、核心模块实现、安全设计到硬件集成，结合HDCP 2.x规范与主流硬件平台（如ARM、FPGA）特性，系统拆解驱动开发关键环节： 1. 协议栈架构与模块划分驱动分层设计硬件抽象层&…...

编程日记 2025/9/12 15:59:11

大数据（7.4）Kafka存算分离架构深度实践：解锁对象存储的无限潜能

目录一、传统架构的存储困境与破局1.1 数据爆炸时代的存储挑战1.2 存算分离的核心价值矩阵二、对象存储集成架构设计2.1 分层存储核心组件2.2 关键配置参数优化三、深度集成实践方案3.1 冷热数据分层策略3.1.1 存储策略性能对比 3.2 跨云数据湖方案四、企业级应用案例4.1 金…...

编程日记 2025/9/15 6:10:45

SLAM文献之SuMa++: Efficient LiDAR-based Semantic SLAM

SuMa是基于Surfel的SLAM算法SuMa的改进版本，通过引入语义分割信息提升动态环境下的鲁棒性和回环检测性能。以下从算法原理和公式推导两方面详细阐述： 一、SuMa算法原理 1. 基础：SuMa算法 SuMa使用Surfel（表面元素）构…...

编程日记 2025/9/5 18:12:36

react中通过 EventEmitter 在组件间传递状态

要在 Reply 组件中通过 statusChangeEvent 发送状态值，并在 Select 组件中接收这个状态值 status，你可以按照以下步骤实现： //Event.jsimport EventEmitter from events;export const statusChangeEvent new EventEmitter();// 工单状态切换…...

编程日记 2025/9/10 0:38:33

机器学习从入门到精通 day_03

1. KNN算法-分类 1.1 样本距离判断明可夫斯基距离：欧式距离，明可夫斯基距离的特殊情况；曼哈顿距离，明可夫斯基距离的特殊情况。两个样本的距离公式可以通过如下公式进行计算，又称为欧式距离。 （…...

编程日记 2025/9/13 1:24:59

WHAT - React 两个重要的 Typescript 类型：ReactNode vs JSX.Element

文章目录 ReactNode 是什么？示例用途 JSX.Element 是什么？示例用途 ReactNode vs JSX.Element 对比使用建议其他相关类型例子总结这两个类型 ReactNode 和 JSX.Element 在 React TypeScript 中经常出现，但它们含义不同，适用场景…...

编程日记 2025/9/14 13:23:31

了解 DeFi：去中心化金融的入门指南与未来展望

去中心化金融，或 DeFi，代表着全球金融体系运作方式的革命性转变。它是一个总称，指的是一个不断增长的去中心化应用程序（dapp）、协议和平台生态系统，这些生态系统构建在公共区块链网络上，无需传统…...

编程日记 2025/9/8 4:33:50

四旋翼无人机手动模式

无人机的手动模式（Manual Mode）是指飞手完全通过遥控器手动控制无人机的飞行姿态、高度、方向和速度，‌无需依赖自动稳定系统或辅助功能‌（如GPS定位、气压计定高、视觉避障等）。这种模式赋予操作者最大的操控自由度&a…...

编程日记 2025/8/29 11:50:50

航电系统之驱动系统篇

航电系统的驱动系统是航空电子系统中负责为各类电子设备、传感器、执行机构及控制模块提供稳定、可靠电能的关键部分。其核心功能在于将飞机电源系统的电能转换为适合航电设备使用的形式，确保航电系统在各种飞行条件下正常运行。以下从组成结构、工作原理、技术特点…...

编程日记 2025/9/15 13:52:23

《嵌入式开发实战：基于Linux串口的LED屏显系统设计与实现》

一、项目概述本文介绍如何通过Linux系统的串口通信，驱动工业级LED显示屏实现动态数据展示。项目采用C语言开发，包含气象数据显示和实时时钟两大核心功能，涉及以下关键技术点： 串口通信协议配置自定义数据帧封装 CRC16校验算法…...

编程日记 2025/9/12 13:24:17

记录一下移动端uView动态表单校验

uni-app开发uView必不可少，uView是uni-app生态专用的UI框架。像element-ui一样uView也有自己的表单组件u-form。对于下图这种列表数据该如何做表单校验，官方文档好像没有具体的案例，记录一下。问题： 主要实现步骤&#xff1a…...

编程日记 2025/8/17 20:53:03

Django项目入门二

Django项目入门二目录 1.修改部门数据 2.新增员工数据 3.修改员工数据 4.删除员工数据一、修改部门数据上一篇文章, 我们只剩下修改功能没有做了, 那在这篇文章, 我们给它补上。在做之前, 我们需要对views.py文件进行调整, 由于我们考虑到有部门信息和员工信息, 如…...

编程日记 2025/9/10 16:50:58

Java创建Android自用证书

在 Android 开发中，如果需要创建一个自用的证书，可以使用 Java 开发工具包（JDK）自带的 keytool 工具。 KeystoreGenerator.java import java.io.BufferedReader; import java.io.File; import java.io.IOException; import java.…...

编程日记 2025/9/12 14:26:39

Redis——实现消息队列

目录前言基于List结构模拟消息队列基于List实现消息队列优缺点基于PubSub（订阅者）实现消息队列示例基于PubSub的消息队列的优缺点基于Stream的消息队列 STREAM类型消息队列的XREAD命令特点： 基于Stream的消息队列-消费者组基于…...

编程日记 2025/9/7 21:34:58

学习51单片机Day01---做实验前置一些内容

目录一、前面要看的： 1.下载软件 2.如何开始做？ 3.基本框架： 4.如何编译运行： 5.可以运行的样子： 6.怎么生成hex： 7.滴滴放到单片机上： 二、过程中可能出现的问题（一直会更…...

编程日记 2025/9/9 1:06:08

pipe匿名管道实操（Linux）

管道相关函数 1 pipe 是 Unix/Linux 系统中的一个系统调用，用于创建一个匿名管道 #include <unistd.h> int pipe(int pipefd[2]); 参数说明： pipefd[2]：一个包含两个整数的数组，用于存储管道的文件描述符： pi…...

编程日记 2025/9/8 18:54:13

vscode 异常关闭后无法远程连接服务器

笔记本没关机只是合上，结果第二天上班整台笔记本高度发热发烧，吓坏了。。。强制关机后再开机，幸好能用。但是vscode连接服务器一直不对。解决方式： 解决一：打开VS Code菜单"View"->“Command Palatt…...

编程日记 2025/8/22 13:04:27

Rust主流框架性能比拼: Actix vs Axum vs Rocket

本内容是对知名性能评测博主 Anton Putra Actix (Rust) vs Axum (Rust) vs Rocket (Rust): Performance Benchmark in Kubernetes 内容的翻译与整理, 有适当删减, 相关指标和结论以原作为准在以下中，我们将比较 Rust 生态中最受欢迎的几个框架。我会将三个应用程序…...

编程日记 2025/9/10 12:49:54

二氧化铪(HfO2)市场发展分析：从基础到前沿应用

引言：探索二氧化铪的重要性与市场潜力在现代材料科学中，二氧化铪（HfO2）作为一种关键的高介电常数（High-k）材料，正逐渐成为半导体行业不可或缺的一部分。二氧化铪是一种白色的固体，…...

编程日记 2025/9/15 19:28:44

写一个简单的demo来理解数据库外键

准备工作安装MySQL 确保已安装MySQL，并启动服务。可以通过命令行或工具（如MySQL Workbench）操作。创建数据库 sql 复制 CREATE DATABASE school; USE school;创建父表和子表步骤 1：创建父表（students）…...

编程日记 2025/9/4 19:18:29

Prompt-to-prompt image editing with cross attention control

Project Page: https://prompt-to-prompt.github.io Paper: https://arxiv.org/abs/2208.01626 Code: https://github.com/google/prompt-to-prompt 文章目录 1. Introduction2. Method2.1 Cross-attention in text-conditioned Diffusion Models2.2 Controlling the Cross-att…...

编程日记 2025/9/13 15:12:14