vue3响应式转换常用API

响应式常用API

  • ref 相关:toRef、toRefs、unRef
  • 只读代理:readonly
  • 判断相关:isRef、isReactive、isProxy、isReadonly
  • 3.3新增API:toValue

ref相关

toRef:基于响应式对象的某一个属性,将其转换为 ref 值

import { reactive, toRef } from 'vue'
const state = reactive({count: 0
})
const countRef = toRef(state, 'count')
// 这里其实就等价于 ref(state.count)
console.log(countRef)
console.log(countRef.value)
import { reactive, isReactive, toRef } from 'vue'
const state = reactive({count: {value: 0}
})
console.log(isReactive(state)) // true
console.log(isReactive(state.count)) // true
const countRef = toRef(state, 'count')
// 相当于 ref(state.count)
console.log(countRef)
console.log(countRef.value)
console.log(countRef.value.value)

toRefs:将一个响应式对象转为一个普通对象,普通对象的每一个属性对应的是一个 ref 值

import { reactive, toRefs } from 'vue'
const state = reactive({count: 0,message: 'hello'
})
const stateRefs = toRefs(state)
console.log(stateRefs) // {count: RefImpl, message: RefImpl}
console.log(stateRefs.count.value)
console.log(stateRefs.message.value)

unRef: 如果参数给的是一个 ref 值,那么就返回内部的值,如果不是 ref,那么就返回参数本身

这个 API 实际上是一个语法糖: val = isRef(val) ? val.value : val

import { ref, unref } from 'vue'
const countRef = ref(10)
const normalValue = 20console.log(unref(countRef)) // 10
console.log(unref(normalValue)) // 20

只读代理

接收一个对象(不论是响应式的还是普通的)或者一个 ref,返回一个原来值的只读代理。

import { ref, readonly } from 'vue'
const count = ref(0)
const count2 = readonly(count) // 相当于创建了一个 count 的只读版本
count.value++;
count2.value++; // 会给出警告

在某些场景下,我们就是希望一些数据只能读取不能修改

const rawConfig = {apiEndpoint: 'https://api.example.com',timeout: 5000
};
// 例如在这个场景下,我们就期望这个配置对象是不能够修改的
const config = readonly(rawConfig)

判断相关

isRef 和 isReactive

import { ref, shallowRef, reactive, shallowReactive, isRef, isReactive } from 'vue'
const obj = {a:1,b:2,c: {d:3,e:4}
}
const state1 = ref(obj)
const state2 = shallowRef(obj)
const state3 = reactive(obj)
const state4 = shallowReactive(obj)
console.log(isRef(state1)) // true
console.log(isRef(state2)) // true
console.log(isRef(state1.value.c)) // false
console.log(isRef(state2.value.c)) // false
console.log(isReactive(state1.value.c)) // true
console.log(isReactive(state2.value.c)) // false
console.log(isReactive(state3)) // true
console.log(isReactive(state4)) // true
console.log(isReactive(state3.c)) // true
console.log(isReactive(state4.c)) // false

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

import { reactive, readonly, shallowReactive, shallowReadonly, isProxy } from 'vue'
// 创建 reactive 代理对象
const reactiveObject = reactive({ message: 'Hello' })
// 创建 readonly 代理对象
const readonlyObject = readonly({ message: 'Hello' })
// 创建 shallowReactive 代理对象
const shallowReactiveObject = shallowReactive({ message: 'Hello' })
// 创建 shallowReadonly 代理对象
const shallowReadonlyObject = shallowReadonly({ message: 'Hello' })
// 创建普通对象
const normalObject = { message: 'Hello' }console.log(isProxy(reactiveObject)) // true
console.log(isProxy(readonlyObject)) // true
console.log(isProxy(shallowReactiveObject)) // true
console.log(isProxy(shallowReadonlyObject)) // true
console.log(isProxy(normalObject)) // false

3.3新增API

toValue

这个 API 和前面介绍的 unref 比较相似

import { ref, toValue } from 'vue'
const countRef = ref(10)
const normalValue = 20console.log(toValue(countRef)) // 10
console.log(toValue(normalValue)) // 20

toValue 相比 unref 更加灵活一些,它支持传入 getter 函数,并且返回函数的执行结果

import { ref, toValue } from 'vue'
const countRef = ref(10)
const normalValue = 20
const getter = ()=>30;console.log(toValue(countRef)) // 10
console.log(toValue(normalValue)) // 20
console.log(toValue(getter)) // 30

-EOF-

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

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

相关文章

必修-场景题

场景题 1. 树遍历二叉树三叉树 2. 并发问题架构设计前端后端NginxSpring Cloud Gateway和限流的依赖: 处理优惠券的缓存逻辑:处理优惠卷HTTP请求:实现令牌桶算法请求限流一秒 用Resilience4j实现降级策略在 application.yml 或 application.p…

论文总结:A Survey on Evaluation of Large Language Models-鲁棒性相关内容

A Survey on Evaluation of Large Language Models 只取了鲁棒性相关的内容 LLMs:《A Survey on Evaluation of Large Language Models大型语言模型评估综述》理解智能本质(具备推理能力)、AI评估的重要性(识别当前算法的局限性设 3.2.1 Robustness鲁棒性&#xf…

Gitlab以及分支管理

一、概述 Git 是一个分布式版本控制系统,用于跟踪文件的变化,尤其是源代码的变化。它由 Linus Torvalds 于 2005 年开发,旨在帮助管理大型软件项目的开发过程。 二、Git 的功能特性 Git 是关注于文件数据整体的变化,直接会将文件…

php将数字转为中文汉字

记录:php将数字转为中文汉字 if (!function_exists(num_to_cn_money)) {// 金额数字转汉字function num_to_cn_money($num, $mode true, $sim false){if (!is_numeric($num)) return 含有非数字非小数点字符!;$char $sim ? array(零, 一, 二, 三, 四…

HTTP模块(二)

HTTP 设置 HTTP 响应报文 HTTP报文常见属性: const http require(http);const server http.createServer((request, response) > {// 设置请求状态码 2xx 4xx 5xxresponse.statusCode 200;// 设置请求描述 了解即可response.statusMessage hello// 指定响…

谷粒商城实战笔记-59-商品服务-API-品牌管理-使用逆向工程的前后端代码

文章目录 一, 使用逆向工程生成的代码二,生成品牌管理菜单三,几个小问题 在本次的技术实践中,我们利用逆向工程的方法成功地为后台管理系统增加了品牌管理功能。这种开发方式不仅能快速地构建起功能模块,还能在一定程度…

uni-app声生命周期

应用的生命周期函数在App.vue页面 onLaunch:当uni-app初始化完成时触发(全局触发一次) onShow:当uni-app启动,或从后台进入前台时显示 onHide:当uni-app从前台进入后台 onError:当uni-app报错时触发,异常信息为err 页面的生命周期 onLoad…

如何使用RESTful API构建 web 应用程序。

RESTful API(Representational State Transferful Application Programming Interface)是一种架构风格,用于设计网络应用程序的 API。它基于 HTTP 协议,使用不同的 HTTP 动词(GET、POST、PUT、DELETE)执行不…

rust 初探 -- 枚举和模式匹配

rust 初探 – 枚举和模式匹配 定义枚举 enum IpAddrKind {// 将数据附加到枚举的变体中// - 不需要额外使用 struct// - 每个变体可以拥有不同的类型以及关联的数据量V4(String), V6(String), }可以使用 impl 为枚举定义方法 enum IpAddrKind {a,b(String),c{x: i32, y: i32}…

Linux-安装VMware-01

一、认识linux Linux 是一个开源的类 Unix 操作系统,由林纳斯托瓦兹(Linus Torvalds)于1991年首次发布。Linux 是许多计算机硬件的底层操作系统,特别是服务器、嵌入式系统和个人电脑。它支持多种架构,包括 x86、x64、A…

算法学习笔记(8.8)-多重背包

目录 Question: 思路解析: 代码示例 多重背包的优化问题: 1.二进制优化 代码示例: 2.单调队列优化(滑动窗口) 代码示例 Question: 4. 多重背包问题 I - AcWing题库https://www.acwing.com/problem/content/description/4/ 多重背包简单来说其…

eqmx上读取数据处理以后添加到数据库中

目录 定义一些静态变量 定时器事件的处理器 订阅数据的执行器 处理json格式数据和将处理好的数据添加到数据库中 要求和最终效果 总结一下 定义一些静态变量 // 在这里都定义成全局的 一般都定义成静态的private static MqttClient mqttClient; // mqtt客户端 private s…

springboo 整合 redis

springBoot 整合 redis starter启动依赖。—包含自动装配类—完成相应的装配功能。 引入依赖 <!--引入了redis整合springboot 的依赖--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis&…

Ubuntu22.04安装Go语言的几种方式

在 Ubuntu 22.04 上安装 Go 语言可以通过几种不同的方法&#xff0c;以下是两种常见的安装方法&#xff1a; 方法1&#xff1a;使用 go 官方安装脚本 打开终端。 下载 Go 语言的安装脚本&#xff1a; curl -O https://go.dev/dl/go1.22.5.linux-amd64.tar.gz请检查 Go 官方网…

基于opencv[python]的人脸检测

1 图片爬虫 这里的代码转载自&#xff1a;http://t.csdnimg.cn/T4R4F # 获取图片数据 import os.path import fake_useragent import requests from lxml import etree# UA伪装 head {"User-Agent": fake_useragent.UserAgent().random}pic_name 0 def request_pic…

EXT4 数据结构

高级数据结构设计 Blocks EXT4 以块为单位分配存储空间。块是一组扇区介于 1KiB 和 64KiB 之间,扇区数量必须为 2 的整数幂。块又被分组成更大的单元,称为块组。默认情况下,文件系统可以包含 2^32 个块,启用 64 bits feature,则文件系统可以有 2^64 个块。 Layout 标准…

谷粒商城实战笔记-65-商品服务-API-品牌管理-表单校验自定义校验器

文章目录 1&#xff0c;el-form品牌logo图片自定义显示2&#xff0c;重新导入和注册element-ui组件3&#xff0c;修改brand-add-or-update.vue控件的表单校验规则firstLetter 校验规则sort 校验规则 1&#xff0c;el-form品牌logo图片自定义显示 为了在品牌列表中自定义显示品…

Typora 以 Github 作为图床使用 PicGo 上传图片

本文简练快速介绍如标题所述的操作流程 文章目录 1.前言1.1 图床简述1.2 Github图床的优缺点1.2.1 优点1.2.2 缺点 2.下载PicGo3.Github访问加速4.用github创建图床服务器4.1 注册4.2 创建仓库 4.3 生成TOKEN令牌5.设置PicGo6.设置Typora7.完成 1.前言 1.1 图床简述 图床&…

人工智能背后的图灵测试(TuringTest)是什么?

人工智能背后的图灵测试(TuringTest)是什么&#xff1f; 一、什么是图灵测试 图灵测试&#xff08;Turing Test&#xff09;由英国数学家和计算机科学家阿兰图灵&#xff08;Alan Turing&#xff09;在1950年提出&#xff0c;用以判断机器是否具有人类智能。图灵在其论文《计…

SNIFFER:用于可解释性的虚假信息检测的多模态大语言模型

S NIFFER : Multimodal Large Language Model for Explainable Out-of-Context Misinformation Detection 论文地址: https://openaccess.thecvf.com/content/CVPR2024/papers/Qi_SNIFFER_Multimodal_Large_Language_Model_for_Explainable_Out-of-Context_Misinformation_D…