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() 创建的代理。

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

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

相关文章

主流日志框架Logback与Log4j2

一、Logback 1、介绍 Logback是由log4j创始人设计的又一个开源日志组件。 Logback当前分成三个模块&#xff1a;logback-core&#xff0c;logback- classic和logback-access logback-core是其它两个模块的基础模块&#xff0c;类似与springframework logback-classic是log…

AWTK fscript 中的 value 扩展函数

fscript 是 AWTK 内置的脚本引擎&#xff0c;开发者可以在 UI XML 文件中直接嵌入 fscript 脚本&#xff0c;提高开发效率。本文介绍一下 fscript 中的 ** value 扩展函数 ** value 扩展函数 value 相关的辅助函数。 1. value_is_valid 判断 value 是否有效。 原型 value_i…

虚拟背景扣像SDK解决方案,电影级抠像技术

美摄科技&#xff0c;作为影像技术领域的领航者&#xff0c;凭借其革命性的虚拟背景抠像SDK解决方案&#xff0c;正以前所未有的方式&#xff0c;重新定义电影级背景抠像技术&#xff0c;让直播与视频制作迈入全新境界。 电影级抠像技术&#xff0c;重塑视觉盛宴 美摄科技的虚…

ArcGIS属性表汉字转拼音

直接复制粘贴现成代码&#xff1a; # -*- coding: utf-8 -*-import arcpyfrom arcpy import envimport osimport pypinyin import sys# 不带声调皿stylepypinyin.NORMAL)def pinyin(word): s for i in pypinyin.pinyin(word, stylepypinyin.NORMAL): s .join(…

SpringBoot开发——整合Redis

文章目录 1、创建项目&#xff0c;添加Redis依赖2、创建实体类Student3、创建Controller4、配置application.yml5、整合完成 Redis ( Remote Dictionary Server &#xff09;是一个开源的内存数据库&#xff0c;遵守 BSD 协议&#xff0c;它提供了一个高性能的键值&#xff08…

PHP一键寄送尽在掌中快递寄件小程序

一键寄送尽在掌中 —— 快递寄件小程序全体验 &#x1f31f; 开篇&#xff1a;告别繁琐&#xff0c;拥抱便捷新纪元 还在为寄快递而烦恼吗&#xff1f;排队等待、填写繁琐的单据、等待快递员上门...这些统统成为过去式&#xff01;“一键寄送尽在掌中快递寄件小程序”。它就像…

mysql 日志恢复

一:查看是否开启binlog日志 show variables like log_%; 二&#xff1a;查看日志存放目录&#xff1a; SHOW VARIABLES LIKE %datadir%;三&#xff1a;查看日志列表 show binary logs; #获取binlog文件列表 show master status&#xff1b; #查看当前正在写入的binlog文件四…

【深度学习】【OnnxRuntime】【C++】模型转化、环境搭建以及模型部署的详细教程

【深度学习】【OnnxRuntime】【C】模型转化、环境搭建以及模型部署的详细教程 提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论 文章目录 【深度学习】【OnnxRuntime】【C】模型转化、环境搭建以及模型部署的详细教程前言模型转换--pytorch转onnxWindows平…

图像检测【YOLOv5】——深度学习

Anaconda的安装配置&#xff1a;&#xff08;Anaconda是一个开源的Python发行版本&#xff0c;包括Conda、Python以及很多安装好的工具包&#xff0c;比如&#xff1a;numpy&#xff0c;pandas等&#xff0c;其中conda是一个开源包和环境管理器&#xff0c;可以用于在同一个电脑…

桥接模式详解和分析JDBC中的应用

&#x1f3af; 设计模式专栏&#xff0c;持续更新中&#xff0c; 欢迎订阅&#xff1a;JAVA实现设计模式 &#x1f6e0;️ 希望小伙伴们一键三连&#xff0c;有问题私信都会回复&#xff0c;或者在评论区直接发言 桥接模式 文章目录 桥接模式桥接模式的四个核心组成&#xff1a…

How to install OpenAI Universe without getting error code 1 on Windows?

题意&#xff1a;怎样在Windows上安装OpenAI Universe并避免出现错误代码1 问题背景&#xff1a; When I try to install OpenAi Universe on my Windows machine via python pip I get following stacktrace: 当我尝试通过 python pip 在我的 Windows 机器上安装 OpenAI Uni…

S-Procedure的基本形式及使用

理论 Lemma 1. ( S- Procedure[ 34] ) : Define the quadratic func- \textbf{Lemma 1. ( S- Procedure[ 34] ) : Define the quadratic func- } Lemma 1. ( S- Procedure[ 34] ) : Define the quadratic func- tions w.r.t. x ∈ C M 1 \mathbf{x}\in\mathbb{C}^M\times1 x…

dify的介绍

官方网址&#xff1a;https://dify.ai Dify 是一个开源的大型语言模型&#xff08;LLM&#xff09;应用开发平台&#xff0c;它提供了一个直观的用户界面&#xff0c;结合了AI工作流、检索-生成&#xff08;RAG&#xff09;管道、智能体&#xff08;Agent&#xff09;、模型管理…

Grafana 可视化配置

Grafana 是什么 Grafana 是一个开源的可视化和监控工具&#xff0c;广泛用于查看和分析来自各种数据源的时间序列数据。它提供了一个灵活的仪表盘&#xff08;dashboard&#xff09;界面&#xff0c;用户可以通过它将数据源中的指标进行图表化展示和监控&#xff0c;帮助分析趋…

国网B接口 USC安防平台 海康摄像机配置

国网B接口海康摄像机配置介绍 如下以海康DS-NACN6432I-GLN摄像机为例&#xff0c;配置国网B接口设备接入流程&#xff0c;海康摄像机的固件版本为 V5.6.11 build 210109 210107。该设备为球机&#xff0c;支持国网B接口云台控制功能。图标编号可以对应二者的配置。 注意 同一…

dify安装(传统docker-compose)

克隆 Dify 代码仓库 克隆 Dify 源代码至本地环境。 git clone --depth 1 https://github.com/langgenius/dify.git启动 Dify 进入 Dify 源代码的 Docker 目录 cd dify/docker-legacy启动 Docker 容器 docker-compose up -d运行命令后&#xff0c;你应该会看到类似以下的输…

Unity3D类似于桌面精灵的功能实现

前言&#xff1a; 由于最近在做游戏魔改&#xff0c;很多功能在游戏里面没法实现&#xff08;没错&#xff0c;说的就是排行榜&#xff09;&#xff0c;所以准备用Unity3D开发一个类似于桌面精灵的功能部件&#xff0c;实现效果如下&#xff1a; PS&#xff1a;有需要定制的老…

408算法题leetcode--第三天

1672. 最富有客户的资产总量 1672. 最富有客户的资产总量思路&#xff1a;双重循环遍历二维数组时间复杂度&#xff1a;O(mn)&#xff1b;空间&#xff1a;O(1) class Solution { public:int maximumWealth(vector<vector<int>>& accounts) {int ret 0;for(…

Java | Leetcode Java题解之第403题青蛙过河

题目&#xff1a; 题解&#xff1a; class Solution {public boolean canCross(int[] stones) {int n stones.length;boolean[][] dp new boolean[n][n];dp[0][0] true;for (int i 1; i < n; i) {if (stones[i] - stones[i - 1] > i) {return false;}}for (int i 1…

使用 Milvus、vLLM 和 Llama 3.1 搭建 RAG 应用

vLLM 是一个简单易用的 LLM 推理服务库。加州大学伯克利分校于 2024 年 7 月将 vLLM 作为孵化项目正式捐赠给 LF AI & Data Foundation 基金会。欢迎 vLLM 加入 LF AI & Data 大家庭&#xff01;&#x1f389; 在主流的 AI 应用架构中&#xff0c;大语言模型&#xff0…