vue3 ref 、unref 、toRef、toRefs

news/2024/11/17 22:19:08/

ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value属性,指向该内部值。

示例

const count = ref(0)
console.log(count.value) // 0
 如果将对象分配为 ref 值,则它将被 reactive 函数处理为深层的响应式对象

unref

如果参数是一个ref,则返回内部值,否则返回参数本身。这是 val = isRef(val) ? val.value : val 的语法糖函数

import { unref } from "vue";
let msgref = ref('你好')
console.log(unref(msgref)) // 你好
let  msg = '你好'
console.log(unref(msg)) // 你好
toRef
可以用来为源响应式对象上的某个 property 新创建一个 reactive。然后,ref 可以被传递,它会保持对其源 property 的响应式连接。

 const state = reactive({
            foo: 1,
            bar: 2
        })
        const fooRef = toRef(state, 'foo')
        console.log(fooRef.value)
        fooRef.value++
        console.log(fooRef.value) //2
        console.log(state.foo)    //2
        state.foo++
        console.log(fooRef.value) // 3
        console.log(state.foo ) //3
toRefs

将响应式对象转换为普通对象,其中结果对象的每个 property 都是指向原始对象相应 property 的 ref

        import { reactive, toRefs } from "vue";         
        const state = reactive({
            foo: 1,
            bar: 2
        })
        const stateAsRefs = toRefs(state)
        // ref 和原始 property 已经“链接”起来了
        state.foo++
        console.log(stateAsRefs.foo.value) // 2
        console.log(state.foo) //2
        stateAsRefs.foo.value++
        console.log(state.foo) // 3
        console.log(stateAsRefs.foo.value) //3
toRef 和 toRefs 都是复制,它复制的其实就是引用 + 响应式 ref
toRef和 加toRefs的区别

toRef: 复制 reactive 里的单个属性并转成 ref
toRefs: 复制 reactive 里的所有属性并转成 ref

toRefs 只会为源对象中包含的 property 生成 ref。如果要为特定的 property 创建 ref,则应当使用 toRef

isRef
检查值是否为一个 ref 对象。

        import { reactive, ref,isRef } from "vue";        
        let info = reactive({ user: 'John Doe' })
        const state = ref({
            foo: 1,
            bar: 2
        })
        console.log(isRef(state)) // true
        console.log(isRef(info)) // false
————————————————
版权声明:本文为CSDN博主「叮当猫咪呀」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/fggfgf/article/details/124947881


http://www.ppmy.cn/news/83960.html

相关文章

第四章 程序的控制结构

文章目录 第四章 程序的控制结构4.1 程序的三种控制结构4.1.1 程序流程图4.1.2 程序控制结构基础4.1.3 程序控制结构扩展 4.2 程序的多分支结构4.2.1 单分支结构:if4.2.2 二分支结构:if-else4.2.3 多分支结构:if-elif-else4.2.4 判断条件及组…

Go语言核心编程-函数、包和错误处理

第 6 章 函数、包和错误处理 6.1 为什么需要函数 6.1.1请大家完成这样一个需求: 输入两个数,再输入一个运算符(,-,*,/),得到结果.。 6.1.2使用传统的方法解决 走代码 分析一下上面代码问题 上面的写法是可以完成功能, 但是代码冗余同时不利于代码维护函数可以解…

景区上线智慧客流人数采集分析系统的根本原因

智慧客流量采集系统是一种高效、智能的客流量采集解决方案,可以实现客流量的实时监控、数据分析和预测,提高服务质量、降低管理成本、提高安全性等优势。该系统适用于各种场所,如景区、商场、服务区、机场等。 AI客流视觉监控 一、智慧客流量…

【HMS Core】【ML Kit】活体检测FAQ合集

【问题描述1】 使用示例代码集成活体检测SDK时,报错state code -7001 【解决方案】 使用示例代码前请详细阅读示例工程中的“README”文件。您需要完成以下操作后才可以运行示例代码。 在AppGallery Connect网站下载自己应用的“agconnect-services.json”文件&a…

可持续能源技术真的能改变世界么?

随着全球气候变化日趋严重,能源转型成为解决气候问题和提高全球能源安全合理性的必要措施之一。可持续能源技术因其对环境的友好性和可再生性而成为了当前热点话题。你认为可持续能源技术真的能改变世界吗?一起来说说你的看法吧! 一、你在工…

WinUI3-自定义应用背景

原文链接 https://white-night.club/index.php/2023/05/22/appdev5/ 2023年5月22日 将应用背景设置为自定义的图片 前言 图片和应用界面色调的选择 这一块仁者见仁,智者见智。但最好从用户交互的角度去仔细思考颜色的搭配。设想一下,你的用户打开你的应…

基于单片机的数据采集系统

摘 要:本文以AT89C51单片机为核心,设计一个基于单片机的数据采集系统。系统可以采集16路模拟量,精度为12位,16路开关量和2路脉冲量,并将采集到的数据每隔一分钟通过串口发送到PC机。 关键字:AT89C51&#…

18-04 数据库分布式架构

分布式ID UUID 优点: 使用简单无需引入额外组件 缺点 无序,无法实现范围查询插入操作比自增ID性能差不少(大概四倍)建议用自增ID(表的主键) UUID(唯一标识) Redis Incr指令优点…