Vue3 工具函数(总结)

目录

前言

1.isRef

2.isReactive

3.isReadonly

4.isProxy

5.toRef

6.toRefs

7.unref

8.shallowRef

9.shallowReactive

10.triggerRef

11.customRef

12.markRaw

13.toRaw

14.readonly

15.watchEffect


前言

在 Vue 3 中,除了核心的响应式 API(如 refreactivecomputed 等),Vue 还提供了许多工具函数,用于处理不同的场景和需求。这些工具函数在 vue 包中可以直接导入使用,它们帮助开发者在使用响应式数据、生命周期、组件状态等方面进行更灵活的控制和操作。

1.isRef

用来检查一个值是否是由 ref 创建的响应式引用。

import { ref, isRef } from 'vue';const count = ref(0);
console.log(isRef(count)); // true
console.log(isRef(123)); // false

2.isReactive

检查一个对象是否是通过 reactive 创建的响应式对象

import { reactive, isReactive } from 'vue';const obj = reactive({ name: 'Vue 3' });
console.log(isReactive(obj)); // true
console.log(isReactive({})); // false

3.isReadonly

用于检查一个对象是否是只读的(由 readonly 创建)

import { readonly, isReadonly } from 'vue';const state = readonly({ count: 0 });
console.log(isReadonly(state)); // true

4.isProxy

检查一个对象是否是由 reactivereadonly 包装的代理对象

import { reactive, readonly, isProxy } from 'vue';const reactiveObj = reactive({ name: 'Vue' });
const readonlyObj = readonly({ count: 0 });
console.log(isProxy(reactiveObj)); // true
console.log(isProxy(readonlyObj)); // true

5.toRef

用于将一个对象的某个属性转化为一个响应式的 ref。可以防止属性丢失响应性。

import { reactive, toRef } from 'vue';const state = reactive({ name: 'Vue' });
const nameRef = toRef(state, 'name');
console.log(nameRef.value); // 'Vue'

6.toRefs

用于将一个对象的每个属性都转换为 ref,返回一个新的对象,其中每个属性都是一个 ref

import { reactive, toRefs } from 'vue';const state = reactive({ name: 'Vue', count: 10 });
const { name, count } = toRefs(state);
console.log(name.value); // 'Vue'
console.log(count.value); // 10

7.unref

如果传入的值是 ref,它将返回 ref.value;否则,直接返回该值。简化了访问 ref 值的操作。

import { ref, unref } from 'vue';const count = ref(10);
console.log(unref(count)); // 10
console.log(unref(100)); // 100 (不是 ref,直接返回原值)

8.shallowRef

创建一个浅层的 ref,即只有 ref 自身是响应式的,ref 内部的对象不会变成响应式。

import { shallowRef } from 'vue';const state = shallowRef({ count: 0 });
console.log(state.value.count); // 0

9.shallowReactive

创建一个浅层的响应式对象,只有对象的顶层属性是响应式的,嵌套对象则不是。

import { shallowReactive } from 'vue';const state = shallowReactive({ user: { name: 'Vue' } });
// 修改顶层属性是响应式的
state.user = { name: 'Vue 3' };
// 嵌套的 `user` 对象内部属性不是响应式的

10.triggerRef

手动触发 ref 的依赖更新,适用于在浅层响应式对象中修改内部值但需要手动触发响应的场景。

import { shallowRef, triggerRef } from 'vue';const state = shallowRef({ count: 0 });
state.value.count = 1; // 手动修改内部值
triggerRef(state); // 手动触发依赖更新

11.customRef

用来创建自定义的 ref,可以自定义 getset 行为。

import { customRef } from 'vue';function useDebouncedRef(value, delay) {let timeout;return customRef((track, trigger) => {return {get() {track();return value;},set(newValue) {clearTimeout(timeout);timeout = setTimeout(() => {value = newValue;trigger();}, delay);}};});
}const count = useDebouncedRef(0, 300);

12.markRaw

  • 用来标记一个对象,使其永远不会变成响应式对象。适用于希望保留原始对象(如第三方库对象)的场景
import { markRaw } from 'vue';const rawObj = markRaw({ name: 'Vue' });
console.log(rawObj); // 该对象永远不会变成响应式

13.toRaw

获取一个响应式对象的原始对象,适用于调试或者避免特定场景下的响应式行为。

import { reactive, toRaw } from 'vue';const state = reactive({ name: 'Vue' });
const rawState = toRaw(state);
console.log(rawState); // 返回原始的非响应式对象

14.readonly

创建一个只读的响应式对象。对象的任何修改都会被忽略并发出警告。

import { readonly } from 'vue';const state = readonly({ count: 0 });
state.count = 1; // 将会触发警告,值不会被修改

15.watchEffect

watch 的简化版本,自动追踪响应式依赖,并在依赖变化时重新执行传入的副作用函数。

import { ref, watchEffect } from 'vue';const count = ref(0);watchEffect(() => {console.log(count.value); // 自动追踪 count
});

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/880858.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

yolov8/9/10模型在安全帽、安全衣检测中的应用【代码+数据集+python环境+GUI系统】

yolov8910模型安全帽、安全衣检测中的应用【代码数据集python环境GUI系统】 yolov8/9/10模型在安全帽、安全衣检测中的应用【代码数据集python环境GUI系统】 背景意义 安全帽和安全衣在工业生产、建筑施工等高风险作业环境中是保护工人免受意外伤害的重要装备。然而&#xff0…

开源软件简介

一、开源运动的发起 近几十年,软件已经称为战略性的社会资源。各大软件供应商传统的对外封锁源代码的运营模式虽说有积极的一面,比如可以维护开发商的利益,使其可以持续地维护进一步开发的能力,以及可以保护软件商及客户的私密信息…

Qt 学习第十一天:QTableWidget 的使用

一、创建QTableWidget对象,设置大小,在窗口的位置 //创建tablewidgetQTableWidget *table new QTableWidget(this);table->resize(550, 300);table->move(100, 100); //移动 二、设置表头 //设置表头QStringList headerList; //定义headerList…

web开发(1)-基础

这是对b站课程的总结,后续可能会继续更 01 前后端分离介绍_哔哩哔哩_bilibili01 前后端分离介绍是Web应用开发-后端基础-基于Springboot框架的第1集视频,该合集共计29集,视频收藏或关注UP主,及时了解更多相关视频内容。https://w…

centos9 nginx 版本

centos9 安装 ssh -V OpenSSH_8.7p1, OpenSSL 3.2.2 4 Jun 2024 openssl version OpenSSL 3.2.2 4 Jun 2024 (Library: OpenSSL 3.2.2 4 Jun 2024) sudo yum install nginx Installing:nginx x86_64 2:1.20.1…

GPG error golang 1.19

1. 问题描述及原因分析 在飞腾2000的服务器,OS为Kylin Linux Advanced Server release V10环境下,docker版本为18.09.0(docker-engine-18.09.0-101.ky10.aarch64),基于容器镜像golang:1.19编译新的容器镜像&#xff0…

【C++篇】启航——初识C++(上篇)

下篇:【C篇】启航——初识C(下篇) 目录 引言 一、C的起源和发展史 1.起源 2.C版本更新 二、C在⼯作领域中的应⽤ 三、C入门建议 1.参考文档 2.推荐书籍 四、C的第一个程序 1.C语言写法 2.C写法 五、命名空间 1.为什么要有命名空…

AI 对话工具汇总

🐣个人主页 可惜已不在 🐤这篇在这个专栏AI_可惜已不在的博客-CSDN博客 🐥有用的话就留下一个三连吧😼 目录 前言: 正文: 前言: 在科技飞速发展的时代,AI 对话正逐渐成为我们获取信息、交流思想的新方式。它以强…

使用rust写一个Web服务器——单线程版本

文章目录 监听TCP连接读取HTTP Reqeust返回HTTP Response返回HTML页面验证Request和选择性Response 使用rust编写一个基于HTTP协议的Web服务器。HTTP是更高层的通信协议,一般来说都基于TCP来构建的,除了HTTP/3,后者是基于UDP构建的协议 仓库…

第一弹:C++ 的基本知识概述

文章目录 知识点 1:C 的概述1. C的特征2. C 程序的编辑、编译和执行3. 第一个 C 源程序4. 面向对象程序设计思想4.1 面向对象程序设计思想初始4.2 面向对象程序设计思想的核心 知识点 2:C 对 C 的扩展1. 作用域访问运算符 ::1.1 全局变量和局部变量1.2 作…

若无向图G(V,E)中含7个顶点,为保证图G在任何情况下都是连通的,则需要的边数最少是多少?

这乍一看是不是可抽象(迷糊)了,butttt待我小翻译一下。 先举少一点的例子,假如我们有三个点,我给你两条边,那是不是不管咋连都一定一定是连通的。 那我们再进一步,假如四个点呢?我给…

RabbitMQ 界面管理说明

1.RabbitMQ界面访问端口和后端代码连接端口不一样 界面端口是15672 http://localhost:15672/ 后端端口是 5672 默认账户密码登录 guest 2.总览图 3.RabbitMq数据存储位置 4.队列 4.客户端消费者连接状态 5.队列运行状态 6.整体运行状态

在Linux中将设备驱动的地址映射到用户空间

本期主题: MMU的简单介绍,以及如何实现设备地址映射到用户空间 往期链接: Linux内核链表零长度数组的使用inline的作用嵌入式C基础——ARRAY_SIZE使用以及踩坑分析Linux下如何操作寄存器(用户空间、内核空间方法讲解)…

Redis篇(最佳实践)(持续更新迭代)

介绍一:键值设计 一、优雅的key结构 Redis 的 Key 虽然可以自定义,但最好遵循下面的几个最佳实践约定: 遵循基本格式:[业务名称]:[数据名]:[id]长度不超过 44 字节不包含特殊字符 例如: 我们的登录业务&#xff0…

『功能项目』宠物的攻击巨型化【80】

本章项目成果展示 我们打开上一篇79宠物的召唤跟随的项目, 本章要做的事情是实现在战斗中有几率触发宠物巨型化攻击将怪物击飞的效果 首先在主角预制体中增加隐藏的宠物巨型化 制作巨型化宠物的攻击效果 将该动画控制器放置在隐藏的巨型化宠物的动画控制器上 首先查…

c# object和dynamic的区别

在 C# 编程中,object 和 dynamic 是两个非常有用的关键字,但它们的使用场景和性能影响各不相同。本文将详细探讨这两者的用法、区别以及如何优化它们的使用。 1. object 关键字 1.1 什么是 object object 是 C# 中所有类型的基类。每个类型&#xff0…

mysql学习教程,从入门到精通,SQL CROSS JOIN 语句(26)

1、SQL CROSS JOIN 语句 CROSS JOIN在 SQL 中用于将两个或多个表的每一行进行组合。这意味着如果表 A 有 M 行,表 B 有 N 行,那么CROSS JOIN 的结果将包含 M * N 行。这种连接不依赖于任何连接条件,因此它会生成笛卡尔积。 下面是一个简单的…

Linux下的基本指令/命令(一)

目录 基本命令 1. Is命令/指令: 罗列当前目录下指定的文件或者目录. 2. pwd命令: 查看当前工作的路径 3. cd命令: 切换到指定路径下。 只能切换到目录中 4. tree命令: 树状显式目录 使用前要输入命令 yum install -y tree ,用来安装一个…

基于Hive和Hadoop的哔哩哔哩网站分析系统

本项目是一个基于大数据技术的哔哩哔哩平台分析系统,旨在为用户提供全面的哔哩哔哩视频数据和深入的用户行为分析。系统采用 Hadoop 平台进行大规模数据存储和处理,利用 MapReduce 进行数据分析和处理,通过 Sqoop 实现数据的导入导出&#xf…

数据流处理技术与Flink框架

一数据流 数据流定义: 数据流(Data Stream)是指数据以连续不断的方式到达和处理的序列。在现实世界中,许多数据来源都是以流的形式存在,比如: 1. 用户行为:用户在网站上的点击流、移动应用中…