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

Vue3 响应式工具函数isRef()、unref()、isReactive()、isReadonly()、isProxy()

isRef()

isRef():检查某个值是否为 ref。

isRef函数接收一个参数,即要判断的值。如果该参数是由ref创建的响应式对象,则返回true;否则,返回false

import { ref, isRef } from 'vue'
const normalValue = '这是一个普通值'
const refValue = ref('这是一个 ref 创建的响应式值')
console.log(isRef(normalValue))  // false
console.log(isRef(refValue))     // true

isRef() 可以作为类型守卫

isRef()的返回值一个类型判定,因此 isRef() 可以被用作类型守卫。

类型判定(type predicate)的概念
在 TypeScript 中,类型判定是一种特殊类型的函数,它用于在运行时确定一个值的类型。类型判定函数的返回值是一个类型谓词,它的形式为参数名 is 类型。当类型判定函数返回true时,TypeScript 编译器会将参数的类型缩小为指定的类型

  • 在条件判断中的类型缩小:当使用isRef()进行类型判断后,TypeScript 可以在后续的代码中根据判断结果进行类型缩小。
    • if分支中,变量的类型被确定为响应式对象。
    • else分支中,变量的类型被确定为非响应式对象。

示例:

import { ref, isRef } from 'vue'let value: unknown
// 在条件判断中的类型缩小
if (isRef(value)) {// 在这个分支中,TypeScript 知道 value 是一个由 ref 创建的响应式对象// value 的类型被收窄了:Ref<unknown>console.log((value as any).value)
} else {// 在这个分支中,TypeScript 知道 value 不是由 ref 创建的响应式对象console.log(value)
}

unref()

unref()接收一个参数,如果参数是 ref,则返回内部值,否则返回参数本身。

unref()的本质是 val = isRef(val) ? val.value : val 计算的语法糖:unref() 的功能实际上等同于使用 isRef() 函数进行判断,如果参数是 ref 对象,则取其 .value 属性,否则直接返回参数本身。

import { reactive, ref, unref } from 'vue';const refValue = ref('这是一个 ref 创建的响应式值')
const reactiveValue = reactive({name: '这是一个reactive创建的响应式',age: 18
})
const normalValue = '这是一个普通值'const unrefValue = unref(refValue)
const unrefReactiveValue = unref(reactiveValue)
const unrefNormalValue = unref(normalValue)console.log('refValue:', refValue)
console.log('unrefValue:', unrefValue)console.log('reactiveValue:', reactiveValue)
console.log('unrefReactiveValue:', unrefReactiveValue)console.log('normalValue:', normalValue)
console.log('unrefNormalValue:', unrefNormalValue)

查看控制台打印结果:
在这里插入图片描述

isReactive()

isReactive():检查一个对象是否是由 reactive()shallowReactive() 创建的代理。
isReactive()接收一个参数,即要判断的对象。如果该参数是由 reactive()shallowReactive() 创建的响应式对象,则返回true;否则,返回false

import { reactive, isReactive } from 'vue'
const normalObj = { message: '普通对象的值' }
const reactiveObj = reactive({ message: 'reactive 创建的响应式对象的值' })
console.log(isReactive(normalObj))   // false
console.log(isReactive(reactiveObj))   // true

isReadonly()

isReadonly():检查传入的值是否为只读对象。

import { reactive, readonly } from 'vue';
let reactiveObj = reactive({name: '这是一个reactive创建的响应式',age: 18
})let readonlyObj = readonly({message: 'hello,readonly!',
})console.log(isReadonly(readonlyObj))   // true
console.log(isReadonly(reactiveObj))   // false

isProxy()

isProxy():检查一个对象是否是由 reactive()readonly()shallowReactive()shallowReadonly() 创建的代理。

相关文章:

Vue3 响应式工具函数isRef()、unref()、isReactive()、isReadonly()、isProxy()

isRef() isRef()&#xff1a;检查某个值是否为 ref。 isRef函数接收一个参数&#xff0c;即要判断的值。如果该参数是由ref创建的响应式对象&#xff0c;则返回true&#xff1b;否则&#xff0c;返回false。 import { ref, isRef } from vue const normalValue 这是一个普通…...

数据结构之简单选择排序介绍与举例

简单选择排序 简单选择排序是一种排序算法&#xff0c;其基本思想是&#xff1a;通过n-i次关键字间的比较&#xff0c;从n-i1个记录中选出关键字最小的记录&#xff0c;并和第i个记录交换之。 举例&#xff1a; 给定数组 [64, 25, 12, 22, 11]&#xff0c;进行简单选择排序。…...

九、Redis 的实际使用与Redis的设计

一、多级缓存架构 在线上系统中&#xff0c;一定不会单纯的只部署一个Redis集群&#xff0c;而是使用Redis结合其他的多级缓存应用进行架构。 使用多级缓存架构的优点就是可以使不同类型的数据分布在不同的应用中&#xff0c;比如redis的热点key可以存储到nginx本地缓存、服务…...

乔拓云模板助力,微信小程序快速上线无需愁备案

想要快速打造并上线自己的微信小程序吗&#xff1f;乔拓云平台是您的不二之选&#xff01;无需担心复杂的备案流程&#xff0c;乔拓云提供免费服务&#xff0c;远程协助您轻松完成微信小程序的备案工作。 只需简单几步&#xff0c;您的小程序就能闪亮登场&#xff1a;首先&…...

Android命令行查看CPU频率和温度

在 Android 设备上&#xff0c;你可以通过命令行工具 adb 来查看 CPU 温度和 CPU 频率&#xff0c;并确定是否有降频情况。以下是具体步骤&#xff1a; 1. 查看 CPU 频率 你可以使用以下命令来查看 CPU 各个核心的当前频率&#xff1a; adb shell cat /sys/devices/system/c…...

力扣: 翻转字符串里的单词

文章目录 需求分析代码结尾 需求 给你一个字符串 s &#xff0c;请你反转字符串中 单词 的顺序。 单词 是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的 单词 分隔开。 返回 单词 顺序颠倒且 单词 之间用单个空格连接的结果字符串。 注意&#xff1a;输入字符…...

Wophp靶场寻找漏洞练习

1.命令执行漏洞 打开网站划到最下&#xff0c;此处的输入框存在任意命令执行漏洞 输入命令whoami 2.SQL注入 搜索框存在SQL注入&#xff0c;类型为整数型 最终结果可以找到管理员账户和密码 3.任意文件上传漏洞 在进入管理员后台后&#xff0c;上传木马文件 访问该文件&…...

国内智能运维厂商月度动态 202408

作为市场人员&#xff0c;虽然也添加了各类行业媒体、同行厂商的关注&#xff0c;但被同事问起业内动向时&#xff0c;常常也是记忆模糊、拍破脑袋也说不完整一件事。 所以找机会翻看了一下各大厂商的公号&#xff0c;先做个简单的8月汇总。 格式暂时是这样的&#xff1a; 整…...

C++ 左值与右值浅谈

左值与右值 序言概念左值和右值的划分理解右值引用常量左值引用与右值引用 移动语义引用折叠完美转发 参考资料 序言 虽然平常都算是了解左值&#xff0c;右值的用法&#xff0c;但是好记性不如烂笔头&#xff0c;记下来供大家评鉴&#xff0c;有错改错&#xff0c;有善赞善&a…...

oracle 如何查死锁

在Oracle中查看死锁通常涉及查询数据字典视图和动态性能视图。以下是一个基本的查询示例&#xff0c;用于检测和显示最近的死锁&#xff1a; SELECT dd.inst_id, dd.name, o.object_id, o.object_type, s.sid, s.serial#, s.username, p.spid, s.program,d.xidusn,d.xidslot,d…...

如何编写ChatGPT提示词

为ChatGPT编写有效的提示需要实施几个关键策略&#xff0c;以使文本到文本生成 AI 工具产生所需的输出。您可以使用 ChatGPT 提示&#xff08;也称为 ChatGPT 命令&#xff09;来增强您的工作或提高您在各个行业的表现。例如&#xff0c;营销人员可以提示 ChatGPT 为社交媒体帖…...

java项目之基于Spring Boot智能无人仓库管理源码(springboot+vue)

项目简介 智能无人仓库管理实现了以下功能&#xff1a; 基于Spring Boot智能无人仓库管理的主要使用者分为&#xff1a; 管理员的功能有&#xff1a;员工信息的查询管理&#xff0c;可以删除员工信息、修改员工信息、新增员工信息 &#x1f495;&#x1f495;作者&#xff1a…...

大厂前端常见的笔试题目

https://zhuanlan.zhihu.com/p/488383397前端面试手写题目总结-CSDN博客 大厂前端面试中常见的手写代码题目涵盖了多个方面&#xff0c;包括但不限于算法、数据结构、JavaScript 基础知识、DOM 操作、异步编程等。以下是一些常见的手写代码题目及其简要说明&#xff1a; 1. 排…...

网络插件 Cilium 更换 Calico

网络插件 Cilium 更换 Calico 集群使用 submariner &#xff0c;通过网络检测发现 Cilium 插件可能兼容性不太好 subctl diagnose allCilium 彻底卸载 helm uninstall cilium -n kube-system# 检查集群中的所有 CNI 插件&#xff08;集群的每个节点都需要删除&#xff09; s…...

SpringSecurity原理解析(二):认证流程

1、SpringSecurity认证流程包含哪几个子流程&#xff1f; 1&#xff09;账号验证 2&#xff09;密码验证 3&#xff09;记住我—>Cookie记录 4&#xff09;登录成功—>页面跳转 2、UsernamePasswordAuthenticationFilter 在SpringSecurity中处理认证逻辑是在UsernamePas…...

数据中台 | 数据资源管理平台介绍

01 产品概述 数据资源的盘查、集成、存储、组织、共享等全方位管理能力&#xff0c;无论对于企业的数字化转型&#xff0c;还是对企业数据资产的开发、运营、交易及入表&#xff0c;都具有极为关键的作用。今天&#xff0c;小兵就来为大家介绍我们自研数据智能平台中的核心产品…...

智慧环保平台建设方案

智慧环保平台建设方案摘要 政策导向与建设背景 背景&#xff1a;全国生态环境保护大会提出坚决打好污染防治攻坚战&#xff0c;推动生态文明建设&#xff0c;目标是在2035年实现生态环境质量根本好转。构建生态文明体系&#xff0c;包括生态文化、生态经济、目标责任、生态文明…...

SpringMVC映射请求;SpringMVC返回值类型;SpringMVC参数绑定;

一&#xff0c;SpringMVC映射请求 SpringMVC 使用 RequestMapping 注解为控制器指定可以处理哪些URL请求 1.1RequestMapping修饰类 注解RequestMapping修饰类&#xff0c;提供初步的请求映射信息&#xff0c;相对于WEB应用的跟目录。 注&#xff1a; 如果在类名前&#xff0…...

【第28章】Spring Cloud之Sentinel注解支持

文章目录 前言一、注解埋点支持二、SentinelResource 注解三、实战1. 准备2. 纯资源定义3. 添加资源配置 四、熔断(fallback)1. 业务代码1.1 Controller1.2 Service1.3 ServiceImpl 2. 熔断配置3. 熔断测试 总结 前言 上一章我们已经完成了对Sentinel的适配工作&#xff0c;这…...

鼎捷新一代PLM 荣膺维科杯 “2023年度行业优秀产品奖”

近日&#xff0c;由中国高科技行业门户OFweek维科网主办的“全数会2024&#xff08;第五届&#xff09;中国智能制造数字化转型大会暨维科杯工业自动化及数字化行业年度评选颁奖典礼”在深圳隆重举办。这不仅是中国工业自动化及数字化行业的一大品牌盛会&#xff0c;亦是高科技…...

零基础掌握SeleniumBasic:革新性浏览器自动化框架全攻略

零基础掌握SeleniumBasic&#xff1a;革新性浏览器自动化框架全攻略 【免费下载链接】SeleniumBasic A Selenium based browser automation framework for VB.Net, VBA and VBScript 项目地址: https://gitcode.com/gh_mirrors/se/SeleniumBasic 每天重复机械的网页操作…...

如何在Mac上免费本地运行Stable Diffusion:Mochi Diffusion终极指南

如何在Mac上免费本地运行Stable Diffusion&#xff1a;Mochi Diffusion终极指南 【免费下载链接】MochiDiffusion Run Stable Diffusion on Mac natively 项目地址: https://gitcode.com/gh_mirrors/mo/MochiDiffusion 还在寻找能在Mac上完美运行Stable Diffusion的免费…...

Kali Linux安装失败?5个常见报错解决方案(虚拟机专用版)

Kali Linux虚拟机安装报错实战指南&#xff1a;5个高频问题深度解析 当你兴致勃勃地在VMware里安装Kali Linux准备大展身手时&#xff0c;突然弹出的报错信息就像一盆冷水浇下来。别急着重装——90%的安装问题都有现成解决方案。本文将聚焦虚拟机环境下最棘手的5类安装报错&…...

大数据毕业设计容易的题目答疑

1 引言 毕业设计是大家学习生涯的最重要的里程碑&#xff0c;它不仅是对四年所学知识的综合运用&#xff0c;更是展示个人技术能力和创新思维的重要过程。选择一个合适的毕业设计题目至关重要&#xff0c;它应该既能体现你的专业能力&#xff0c;又能满足实际应用需求&#xff…...

ARM嵌入式开发:寄存器操作与函数指针实战

## 1. 嵌入式开发中的寄存器操作技巧### 1.1 寄存器地址访问方法 在ARM架构嵌入式开发中&#xff0c;直接操作硬件寄存器是底层开发的核心技能。通过C语言访问特定内存地址的标准做法是使用指针类型转换&#xff1a;c #define GSTATUS1 (*(volatile unsigned int *)0x560000B0)…...

Image-to-Video镜像使用技巧:提示词怎么写?参数怎么调?

Image-to-Video镜像使用技巧&#xff1a;提示词怎么写&#xff1f;参数怎么调&#xff1f; 1. 快速上手Image-to-Video镜像 Image-to-Video图像转视频生成器是一款基于I2VGen-XL模型的实用工具&#xff0c;能够将静态图片转化为动态视频。这个由科哥二次开发的镜像已经预装了…...

夜间自动化利器:OpenClaw+nanobot定时执行爬虫任务

夜间自动化利器&#xff1a;OpenClawnanobot定时执行爬虫任务 1. 为什么选择OpenClaw做夜间自动化 凌晨三点&#xff0c;我的电脑屏幕突然亮了起来。这不是灵异事件&#xff0c;而是OpenClaw正在执行我预设的爬虫任务——收集行业数据、清洗整理、存入数据库&#xff0c;整个…...

省token秘籍:OpenClaw+nanobot镜像长文本处理优化方案

省token秘籍&#xff1a;OpenClawnanobot镜像长文本处理优化方案 1. 当长文本遇上大模型&#xff1a;我的token焦虑症 第一次尝试用OpenClaw处理公司三年的技术文档归档时&#xff0c;我看着账单倒吸一口凉气——单次50万token的消耗让我的个人预算瞬间见底。这促使我开始探索…...

s2-pro音色复用效果实测:不同参考音频时长(3s/10s/30s)对合成质量影响

s2-pro音色复用效果实测&#xff1a;不同参考音频时长&#xff08;3s/10s/30s&#xff09;对合成质量影响 1. 引言 s2-pro作为Fish Audio开源的专业级语音合成模型镜像&#xff0c;其音色复用功能在实际应用中表现如何&#xff1f;本文将针对一个关键问题展开实测&#xff1a…...

bilibili_live_stream_code:开源直播推流工具 解锁自定义直播新体验

bilibili_live_stream_code&#xff1a;开源直播推流工具 解锁自定义直播新体验 【免费下载链接】bilibili_live_stream_code 用于在准备直播时获取第三方推流码&#xff0c;以便可以绕开哔哩哔哩直播姬&#xff0c;直接在如OBS等软件中进行直播&#xff0c;软件同时提供定义直…...