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

Vue 3 的核心组合式 API 函数及其完整示例、使用场景和总结表格

news 来源：原创 2025/7/3 9:12:48

以下是 Vue 3 的核心组合式 API 函数及其完整示例、使用场景和总结表格：
在这里插入图片描述

1. `ref`

作用

创建一个响应式引用值，用于管理基本类型或单个值的响应式状态。

示例

<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template><script setup>
import { ref } from 'vue';const count = ref(0);const increment = () => {count.value++; // 通过.value修改值
};
</script>

2. `reactive`

作用

创建一个响应式对象，用于管理复杂对象的响应式状态。

示例

<template><div><p>Name: {{ user.name }}</p><p>Age: {{ user.age }}</p><button @click="updateUser">Update User</button></div>
</template><script setup>
import { reactive } from 'vue';const user = reactive({name: 'Alice',age: 25
});const updateUser = () => {user.name = 'Bob';user.age = 30;
};
</script>

3. `computed`

作用

创建一个计算属性，基于响应式数据动态计算值。

示例

<template><div><p>First: {{ firstName }}</p><p>Last: {{ lastName }}</p><p>Full Name: {{ fullName }}</p></div>
</template><script setup>
import { ref, computed } from 'vue';const firstName = ref('John');
const lastName = ref('Doe');const fullName = computed(() => {return `${firstName.value} ${lastName.value}`;
});
</script>

4. `watch`

作用

监视响应式数据的变化，并在变化时执行回调。

示例

<template><div><input v-model="message" placeholder="输入内容..." /><p>输入内容变化次数：{{ changeCount }}</p></div>
</template><script setup>
import { ref, watch } from 'vue';const message = ref('');
const changeCount = ref(0);watch(message, (newValue, oldValue) => {changeCount.value++;
});
</script>

5. `watchEffect`

作用

自动追踪响应式依赖，并在依赖变化时执行回调（无需手动指定依赖项）。

示例

<template><div><input v-model="text" placeholder="输入内容..." /><p>输入内容反转：{{ reversedText }}</p></div>
</template><script setup>
import { ref, watchEffect } from 'vue';const text = ref('');
let reversedText = '';watchEffect(() => {reversedText = text.value.split('').reverse().join('');
});
</script>

6. `onMounted`

作用

在组件挂载完成后执行初始化逻辑（生命周期钩子）。

示例

<template><div ref="myDiv">Hello Vue!</div>
</template><script setup>
import { ref, onMounted } from 'vue';const myDiv = ref(null);onMounted(() => {console.log('Component mounted:', myDiv.value.offsetHeight);
});
</script>

7. `nextTick`

作用

在 Vue 完成 DOM 更新后执行回调。

示例

<template><div ref="box">Click to change color</div><button @click="changeColor">Change Color</button>
</template><script setup>
import { ref, nextTick } from 'vue';const box = ref(null);const changeColor = () => {box.value.style.backgroundColor = 'lightblue';nextTick(() => {console.log('DOM updated:', box.value.style.backgroundColor);});
};
</script>

8. `provide` & `inject`

作用

实现祖先进级通信，父组件提供数据，子组件注入使用。

示例

父组件（Parent.vue）:

<template><ChildComponent />
</template><script setup>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const theme = ref('light');
provide('theme', theme);
</script>

子组件（ChildComponent.vue）:

<template><div :class="theme.value">当前主题：{{ theme.value }}</div>
</template><script setup>
import { inject } from 'vue';const theme = inject('theme');
</script>

9. `toRefs`

作用

将 reactive 对象的属性转换为独立的 ref 引用，避免解构后失去响应性。

示例

<template><div><p>Name: {{ name }}</p><p>Age: {{ age }}</p></div>
</template><script setup>
import { reactive, toRefs } from 'vue';const state = reactive({name: 'Alice',age: 25
});// 使用toRefs保持响应性
const { name, age } = toRefs(state);
</script>

10. `shallowReactive` & `shallowRef`

作用

创建浅层响应式对象/引用，仅追踪顶级属性变化。

示例

<template><div><p>{{ obj.name }}</p><p>{{ obj.detail }}</p></div>
</template><script setup>
import { shallowReactive } from 'vue';const obj = shallowReactive({name: 'Item',detail: { price: 100 }
});// 修改顶级属性会触发更新
obj.name = 'New Item'; // 修改嵌套属性不会触发更新（需使用reactive）
obj.detail.price = 200; // 不会触发视图更新
</script>

总结表格

函数	作用	示例代码片段	使用场景
ref	创建响应式引用值（基本类型或单值）	`const count = ref(0); count.value++`	管理单个值（如计数器、布尔标志）
reactive	创建响应式对象或数组	`const user = reactive({ name: 'Alice' }); user.name = 'Bob'`	管理复杂对象/数组的响应式状态
computed	定义计算属性（基于响应式数据动态计算值）	`const fullName = computed(() => firstName.value + lastName.value)`	需要动态计算值时（如合并多个响应式值）
watch	监听响应式数据变化并执行回调	`watch(message, (newVal) => console.log(newVal))`	需要响应数据变化时执行副作用（如日志、API请求）
watchEffect	自动追踪依赖并响应变化	`watchEffect(() => console.log(text.value))`	需要自动追踪依赖项的副作用（无需手动指定依赖）
onMounted	组件挂载后执行逻辑（生命周期钩子）	`onMounted(() => console.log('Mounted!'))`	初始化操作（如数据获取、DOM操作）
nextTick	在 DOM 更新后执行回调	`nextTick(() => console.log(element.offsetHeight))`	需要操作更新后的 DOM 元素
provide/inject	祖先进级通信（父组件提供数据，子组件注入使用）	`provide('theme', theme)` 和 `const theme = inject('theme')`	需要在多层组件间共享数据
toRefs	将 reactive 对象的属性转为 ref，保持响应性	`const { name } = toRefs(state)`	解构 reactive 对象后仍需保持响应性
shallowReactive	创建浅层响应式对象（仅追踪顶级属性）	`const obj = shallowReactive({ name: 'Item' })`	管理嵌套层级较深的对象，优化性能

关键区别

对比项	ref	reactive	watch	watchEffect
适用类型	基本类型、单个值	对象、数组	任何响应式数据	自动追踪依赖
访问方式	`.value`	直接访问属性	需指定依赖项	无需指定依赖项
响应性深度	深响应	深响应	支持嵌套属性变化	支持嵌套属性变化

如果需要其他函数（如 onUnmounted、getCurrentInstance 等）的示例或进一步解释，请随时告知！

Vue 3 的核心组合式 API 函数及其完整示例、使用场景和总结表格

以下是 Vue 3 的核心组合式 API 函数及其完整示例、使用场景和总结表格： 1. ref 作用创建一个响应式引用值，用于管理基本类型或单个值的响应式状态。示例 <template><div><p>Count: {{ count }}</p><button click&quo…...

编程日记 2025/7/3 9:12:48

Kotlin学习基础知识大全(上)

文章目录 Kotlin基础知识全面解析第一章：Kotlin语言概述1.1 Kotlin的发展历程1.2 Kotlin的设计目标1.3 Kotlin的应用领域1.4 Kotlin与Java的比较第二章：Kotlin基础语法2.1 变量与常量2.2 基本数据类型数字类型示例：字符和字符串示例&#xf…...

编程日记 2025/7/3 8:30:03

【Java面试笔记：进阶】18.什么情况下Java程序会产生死锁？如何定位、修复？

死锁（Deadlock）是指两个或多个线程因竞争资源而无限期阻塞的现象。 1. 死锁的定义与产生原因定义：死锁是一种程序状态，多个线程或进程因循环依赖而永久处于等待状态，无法继续执行。根据 Coffman 条件，死锁产生需同时满足以下四个必要条件：互斥（Mutual Exclusion）…...

编程日记 2025/6/29 9:51:58

PS Mac Photoshop 2025 for Mac图像处理 PS 2025安装笔记

Mac分享吧文章目录效果一、准备工作二、开始安装1、Anticc简化版安装1.1双击运行软件，安装1.2 解决来源身份不明的开发者问题**此代码为打开：系统偏好设置 – 隐私与安全性，中的【任何来源】，如下图：**1.3 再次运行…...

编程日记 2025/7/3 8:51:08

HarmonyOS 框架基础知识

参考文档：HarmonyOS开发者文档第三方库：OpenHarmony三方库中心仓基础特性 Entry：关键装饰器 Components：组件特性EntryComponent作用范围仅用于页面入口可定义任意可复用组件数量限制每个页面有且仅有一个无数量…...

编程日记 2025/7/3 8:23:17

LabVIEW实现Voronoi图绘制功能

该 LabVIEW 虚拟仪器（VI）借助 MathScript 节点，实现基于手机信号塔位置计算 Voronoi 图的功能。通过操作演示，能直观展示 Voronoi 图在空间划分上的应用。各部分功能详细说明随机地形创建部分功能：根据 “Maximum a…...

编程日记 2025/7/3 8:20:15

centos7的环境下ollama 如何卸载

在 CentOS 7 环境下卸载 ollama，可以按照以下步骤操作。假设 ollama 是通过手动安装的，以下是卸载的详细步骤。 1. 停止所有运行中的 ollama 进程在卸载之前，确保所有与 ollama 相关的进程都已停止。查找并停止进程 ps aux | grep ollam…...

编程日记 2025/7/3 9:05:24

中心极限定理（CLT）习题集 · 答案与解析篇

中心极限定理（CLT）习题集答案与解析篇与题目篇一一对应。若有其他解法欢迎在评论区补充。 1. 概念与判断题 1.1 经典叙述若 (X_1,X_2,\dots) i.i.d.，满足 (E[X_1]=\mu,;0<\sigma^2:=\operatorname{Var}(X_1)<\infty)。则 [ Z_n=\frac{\sum_{k=1}^{n}(X_k-\mu)}…...

编程日记 2025/7/3 8:35:57

Spring Cloud Gateway配置双向SSL认证（完整指南）

本文将详细介绍如何为Spring Cloud Gateway配置双向SSL认证，包括证书生成、配置和使用。目录结构 /my-gateway-project ├── /certs │ ├── ca.crt # 根证书 │ ├── ca.key # 根私钥 │ ├── gateway.crt # 网关证书 │ ├── …...

编程日记 2025/7/3 9:02:41

中间系统-SPF计算

SPF计算 isis如何计算路由：以自己为根构建SPF树，之后填充叶子。 <R1>display isis lsdb 0000.0000.0001.00-00 verbose //查看lsp的详细信息 SOURCE 0000.0000.0001.00 //源节点系统，用于标识产生该LSP的路由器…...

编程日记 2025/6/29 10:51:12

立马耀：通过阿里云 Serverless Spark 和 Milvus 构建高效向量检索系统，驱动个性化推荐业务

作者：厦门立马耀网络科技有限公司大数据开发工程师陈宏毅背景介绍行业蝉选是蝉妈妈出品的达人选品服务平台。蝉选秉持“陪伴达人赚到钱”的品牌使命，致力于洞悉达人变现需求和痛点，提供达人选高佣、稳变现、速响应的选品服务。业务特…...

编程日记 2025/7/3 8:31:02

Diffusion inversion后的latent code与标准的高斯随机噪音不一样

可视化latents_list如下; 可视化最后一步与标准的噪声： 能隐约看出到最后一步还是会有“马”的形状整个代码（及可视化代码如下）： ## 参考freeprompt(FPE)的代码 import os import torch import torch.nn as nn import torch.n…...

编程日记 2025/7/3 8:36:57

C语言-函数-1

以下是我初学C语言的笔记记录，欢迎在评论区留言补充一，函数分为几类 * 函数分为两类： 一类是库函数；一类是自定义函数 * 库函数： 系统自己带的，在使用时候，要用到头文件； 查询库函…...

编程日记 2025/7/3 8:46:24

AXOP34032: 40V/40µA 轨到轨输入输出双通道运算放大器

AXOP34032是一款通用型高压低功耗双通道运算放大器，产品的工作电压为2.5V至40V，具有1.2MHz的带宽，压摆率为 0.7V/μs，单路静态电流为40A。该产品非常适合需要较高耐压的低功耗应用。产品可选关断功能(AXOP34032S)。主要特性 2…...

编程日记 2025/7/3 8:52:58

HTML5 服务器发送事件 (Server-Sent Events)：实现网页自动获取服务器更新

一、引言在现代 Web 应用开发中，实时性和动态交互性变得越来越重要。HTML5 引入的服务器发送事件（Server-Sent Events，简称 SSE）为网页获取来自服务器的实时更新提供了一种简单而有效的解决方案。与传统方式中网页需主动询问服务器是否有更新不同，SSE 能够让更新自动推送…...

编程日记 2025/7/3 8:57:19

如何创建和使用 Hive 视图

一、Hive 视图的基本概念 Hive 视图是一种虚拟表，其内容由查询语句定义，本身不存储实际数据。当查询视图时，Hive 会动态执行视图定义中的查询逻辑并返回结果。视图的核心作用是简化复杂查询、提供数据抽象和实现权限控制。例如，通过视图可以隐藏底层表的复杂关联关系，或限…...

编程日记 2025/7/3 8:43:52

快速体验tftp文件传输（嵌入式设备）

一、参考资料 Linux tftp 命令 | 菜鸟教程 Ubuntu最新版本(Ubuntu22.04LTS)安装Tftp服务及其使用教程-CSDN博客 Windows下的Tftpd32(Tftpd64)软件下载和使用教程-集成了Tftp服务器、客户端-CSDN博客 tftpd32 tftpd64文件传输安装和使用教程【图文并茂】-CSDN博客二、快速…...

编程日记 2025/7/3 8:59:11

数据库进阶之MySQL 程序

1.目标 1> 了解mysqlId服务端程序 2> 掌握mysql客户端程序的使用 3> 了解工具包中的其他程序 2. MySQL程序简介本章介绍 MySQL 命令⾏程序以及在运⾏这些程序时指定选项的⼀般语法(如:mysql -uroot -p)。对常⽤程序进⾏详细的讲解(实用工具的使用方法)&#xf…...

编程日记 2025/7/3 8:36:57

细说STM32单片机FreeRTOS信号量和互斥量及二值信号量的应用实例

目录一、信号量和互斥量概述 1、二值信号量 2、计数信号量 3、互斥量 4、递归互斥量 5、相关函数概述 （1） 负责创建的函数 （2） 负责释放和获取的函数 （3）负责返回数据的函数二、二值信号量使用…...

编程日记 2025/7/3 8:47:05

云原生之认识DDD

一、DDD是什么？领域驱动设计(DDD) 做为一种软件工程的方法论，它可以帮助我们设计高质量的软件，或者说任何工程的设计都需要方法论，不论是城市设计、建筑设计、室内设计。比如没有方法论的情况下楼是可以盖起来的，或许整个楼道和窗户上挂满了电话线、闭路线、电线？下水…...

编程日记 2025/7/3 8:34:50

Kingbase 数据库物理备份与恢复操作手册

版本环境：KingbaseES V8R6 适用对象：DBA / 运维工程师 / 技术支持人员目标用途：生产环境灾备保障、全量迁移、异地容灾恢复一、物理备份操作流程物理备份是指直接对数据库实例的物理文件进行复制，具备完整性强、恢复速度快等特…...

编程日记 2025/7/3 8:25:00

高等数学同步测试卷同济7版试卷部分上做题记录第四章不定积分同步测试卷 A卷

第四章不定积分同步测试卷 A卷一、单项选择题(本大题共5小题，每小题3分，总计15分) 1. 2. 3. 4. 5. 二、填空题(本大题共5小题,每小题3分,总计15 分) 6. 7. 8. 9. 10. 三、求解下列各题(本大题共5小题,每小题6分,总计30…...

编程日记 2025/7/3 8:43:51

【刷题Day25】用户态和内核态、Reactor、虚拟内存（浅）

什么是用户态和内核态？ 用户态（User Mode）和内核态（Kernel Mode）是操作系统中的两种运行模式，用于区分应用程序与操作系统内核的操作权限。两者区别在于权限级别： 用户态：应用程…...

编程日记 2025/7/3 8:41:53

使用Qt Quick Controls创建自定义日历组件

目录引言相关阅读1. DayOfWeekRow2. MonthGrid3. WeekNumberColumn 项目结构及实现工程结构图代码实现及解析1. 组件封装2. 主界面实现运行效果总结下载链接引言 Qt6 Quick框架提供了一套丰富的日历相关组件，包括 MonthGrid、DayOfWeekRow 和 WeekNumberColumn…...

编程日记 2025/7/3 8:56:30

Java 富文本转word

前言： 本文的目的是将传入的富文本内容(html标签，图片)并且分页导出为word文档。所使用的为docx4j 一、依赖导入 <dependency><groupId>org.docx4j</groupId><artifactId>docx4j</artifactId&…...

编程日记 2025/7/3 8:46:23

基于 Spring Boot 瑞吉外卖系统开发（七）

基于 Spring Boot 瑞吉外卖系统开发（七） 新增菜品页面菜品管理页面提供了一个“新增菜品”按钮，单击该按钮时，会打开新增菜品页面。菜品分类列表首先要获取分类列表数据。请求路径/category/list，请求方法GE…...

编程日记 2025/6/29 9:52:30

// Child.jsx import React, { forwardRef, useImperativeHandle, useState } from react; import { Form, Input } from antd;const Child forwardRef((props, ref) > {const [form] Form.useForm();const [customState, setCustomState] useState(默认值);useImperativ…...

编程日记 2025/6/29 12:00:55

1. ref

作用

示例

2. reactive

作用

示例

3. computed

作用

示例

4. watch

作用

示例

5. watchEffect

作用

示例

6. onMounted

作用

示例

7. nextTick

作用

示例

8. provide & inject

作用

示例

9. toRefs

作用

示例

10. shallowReactive & shallowRef

作用

示例