ref、isRef、toRef、toRefs、toRaw 看着一堆类似的东西,一个头两个大,今天整理一篇文章详细介绍它们的功能及区别。

1、ref

ref 属性除了能够获取元素外,也可以使用 ref 函数,创建一个响应式数据,当数据值发生改变时,视图自动更新。

<script lang="ts" setup>
import { ref } from 'vue'
let str: string = ref('我是张三')
const chang = () => {
str.value = '我是钻石王老五'
console.log(str.value)
}
</script>
<template>
<div>
{{ str }}
<button type="button" @click="chang">修改值</button>
</div>
</template>

2、isRef

检查变量是否为一个被 ref 包装过的对象,如果是返回 true ,否则返回 false。

import { ref, isRef, reactive } from 'vue'

let str: string = ref('我是张三')
let num: number = 1
let per = reactive({ name: '代码女神', work: '程序媛' }) console.log('strRes', isRef(str)) //true
console.log('numRes', isRef(num)) //false
console.log('perRes', isRef(per)) //false

3、toRef

创建一个 ref 对象,其 value 值指向另一个对象中的某个属性。

toRef(obj, key) 将对象中的某个值转化为响应式数据,分为两种情况:

  • toRef 定义原始非响应式数据,修改值时,原始数据和 copy 数据都会变的,但是视图不更新。
<script>
import { ref, isRef, toRef, reactive } from 'vue'
let obj = {
name: '姓名',
age: 18,
}
let name: string = toRef(obj, 'name')
const chang = () => {
obj.name = '钻石王老五'
name.value = '李四'
console.log(obj.name) // 李四
console.log('name', name) // 李四
}
//chang() //DOM挂载前调用
</script>
<template>
<div>
{{ obj.name }} ------- {{ name }}
<button type="button" @click="chang">修改值</button>
</div>
</template>

    注意:如果是在 DOM 挂载之前调用 chang 方法,改变数值,此时数据和视图都会发生改变。

  • toRef 定义原始数据响应式数据,修改值时,原始数据,和 copy 数据都会改变,视图也会更新。
<script>
import { ref, isRef, toRef, reactive } from 'vue'
let obj = reactive({
name: '姓名',
age: 18,
})
let name: string = toRef(obj, 'name')
const chang = () => {
obj.name = '钻石王老五'
name.value = '李四'
}
</script>
<template>
<div>
{{ obj.name }} ------- {{ name }}
<button type="button" @click="chang">修改值</button>
</div>
</template>

最终值为 “李四”。

4、toRefs

toRefs 用来解构 ref、reactive 包裹的响应式数据。接收一个对象作为参数,遍历对象上的所有属性,将对象上的所有属性变成响应式数据。

let obj = reactive({
name: '姓名',
age: 18,
})
let { name, age } = toRefs(obj)
const chang = () => {
name.value = '钻石王老五'
age.value++
}
</script>
<template>
<div>
{{ name }} ------- {{ age }}
<button type="button" @click="chang">修改值</button>
</div>
</template>

toRefs 解构数据时,如果某些参数作为可选参数,可选参数不存在时就会报错,如:

let obj = reactive({
name: '姓名',
age: 18,
})
let { name, age, work } = toRefs(obj)
const chang = () => {
name.value = '钻石王老五'
age.value++
console.log('work', work.value)
work.value = '程序媛'
}

此时可以使用 toRef 解决此问题,使用 toRef 解构对象某个属性时,先检查对象上是否存在该属性,如果存在就继承对象上的属性值,如果不存在就会创建一个。

修改上边的代码为:

let obj = reactive({
name: '姓名',
age: 18,
})
let { name, age } = toRefs(obj)
let work = toRef(obj, 'work')
const chang = () => {
name.value = '钻石王老五'
age.value++
console.log('work', work.value)
work.value = '程序媛'
}

5、toRaw

将响应式对象转为原始对象。做一些不想被监听的事情,从 ref 或 reactive 得到原始数据。

修改原响应式数据时,toRaw 转换得到的数据会被修改,视图也会更新,如:

<script lang="ts" setup>
import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue'
let obj = reactive({
name: '姓名',
age: 18,
})
let newObj = toRaw(obj)
const chang = () => {
obj.name = '钻石王老五'
obj.age++
}
</script>
<template>
<div>
{{ obj.name }} ------- {{ obj.age }}
<button type="button" @click="chang">修改值</button>
<br />
{{ newObj }}
</div>
</template>

如果修改 toRaw 得到的原始数据,原数据也会被修改,但是视图不更新。如:

<script lang="ts" setup>
import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue'
let obj = reactive({
name: '姓名',
age: 18,
})
let newObj = toRaw(obj)
const chang = () => {
obj.name = '钻石王老五'
obj.age++
}
const changNew = () => {
newObj.name = '搞笑'
console.log('newObj', newObj)
console.log('obj', obj)
}
</script>
<template>
<div>
{{ obj.name }} ------- {{ obj.age }}
<button type="button" @click="chang">修改值</button>
<br />
{{ newObj }}
<button @click="changNew">修改</button>
</div>
</template>

vue3 的 ref、isRef、toRef、toRefs、toRaw 详细介绍的更多相关文章

  1. 全面了解Vue3的 ref 和相关函数和计算属性

    基础类型的响应性 -- ref 在vue3里面,我们可以通过 reactive 来实现引用类型的响应性,那么基础类型的响应性如何来实现呢? 可能你会想到这样来实现: const count = rea ...

  2. VUE3 之 ref、provide、inject 的使用 - 这个系列的教程通俗易懂,适合新手

    1. 概述 首因效应告诉我们: 在日常交往中,第一印象是非常重要的,好的第一印象能让我们在与人相处时事半功倍. 但也从另一面告诉我们,不能仅凭第一印象去判断一个人,有时虚假的第一印象,也有可能蒙蔽我们 ...

  3. linux配置网卡IP地址命令详细介绍及一些常用网络配置命令

    linux配置网卡IP地址命令详细介绍及一些常用网络配置命令2010-- 个评论 收藏 我要投稿 Linux命令行下配置IP地址不像图形界面下那么方 便,完全需要我们手动配置,下面就给大家介绍几种配置 ...

  4. 城市经纬度 json 理解SignalR Main(string[] args)之args传递的几种方式 串口编程之端口 多线程详细介绍 递归一个List<T>,可自己根据需要改造为通用型。 Sql 优化解决方案

    城市经纬度 json https://www.cnblogs.com/innershare/p/10723968.html 理解SignalR ASP .NET SignalR 是一个ASP .NET ...

  5. Spring BeanFactory与FactoryBean的区别及其各自的详细介绍于用法

    Spring BeanFactory与FactoryBean的区别及其各自的详细介绍于用法 1. BeanFactory BeanFactory,以Factory结尾,表示它是一个工厂类(接口),用于 ...

  6. awk 正则表达式、正则运算符详细介绍

    前言:使用awk作为文本处理工具,正则表达式是少不了的. 要掌握这个工具的正则表达式使用.其实,我们不必单独去学习它的正则表达式.正则表达式就像一门程序语言,有自己语法规则已经表示意思. 对于不同工具 ...

  7. [No0000A7]批处理经常用到的变量及批处理>NUL详细介绍

    绝对路径是指调用绝对的程序位置的路径,例如: start C:\Windows\test.exe 相对路径是文件改变路径以后还会按照变量的路径所在位置去调用,例如: start %WINDIR%\te ...

  8. _MSC_VER详细介绍

    _MSC_VER详细介绍 转自:http://www.cnblogs.com/braver/articles/2064817.html _MSC_VER是微软的预编译控制. _MSC_VER可以分解为 ...

  9. php CGI、Fastcgi、PHP-FPM的详细介绍与之间的关系

    以下PHP CGI.Fastcgi.PHP-FPM的一些信息归纳和汇总----->详细介绍与之间的关系 一:CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的 web ...

随机推荐

  1. 【设计过程】.NET ORM FreeSql WhereDynamicFilter 动态表格查询功能

    前言 最近几乎每天40度,越热越不想面对电脑,还好开源项目都比较稳定没那么多待解决问题,趁着暑假带着女儿学习游泳已略有小成.游泳好处太多了,建议有孩子的都去学学,我是在岸边指导大约一周左右就学会了,目 ...

  2. NewApiDay03_File类

    File类创建一个新文件 File类的每一个实例可以表示硬盘(文件系统)中的一个文件或目录(实际上表示的是一个抽象路径) 使用File可以做到: 1:访问其表示的文件或目录的属性信息,例如:名字,大小 ...

  3. RabbitMQ消费者消失与 java OOM

    原因: 下午先是收到钉钉告警有一个消费者系统任务积压, 当时以为就是有范围上量没有当回事,后来客服群开始反馈说有客户的数据没有生成.这个时候查看mq的后台,发现任务堆积数量还是很多. 这个时候登录一台 ...

  4. JavaScript进阶内容——DOM详解

    JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...

  5. python中的标识符和保留字

    保留字,有一些单词被赋予了特定的意义,这些单词不能作为对象的名字 想要快速获取python中的关键字可以通过以下的程 序来快速实现 import keyword print(keyword.kwlis ...

  6. .Net CLR GC 动态加载短暂堆阈值的计算及阈值超量的计算

    前言: 很多书籍或者很多文章,对于CLR或者GC这块只限于长篇大论的理论性概念,对于里面的如何运作模式,却几乎一无所知.高达近百万行的CPP文件,毕竟读懂的没有几个.以下取自CLR.Net 6 Pre ...

  7. 高通cDSP简单编程例子(实现查询高通cDSP使用率、签名),RK3588 npu使用率查询

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  8. Redis常见数据类型

    String 常用命令: get.set.incr.decr mget等操作,普通的key/value存储都可以归为此类 Hash 常用命令: hget,hset,hgetall 等. List(队列 ...

  9. 鸟枪换炮,利用python3对球员做大数据降维(因子分析得分),为C罗找到合格僚机

    鸟枪换炮,利用python3对球员做大数据降维(因子分析得分),为C罗找到合格僚机 原文转载自「刘悦的技术博客」https://v3u.cn/a_id_176 众所周知,尤文图斯需要一座欧冠奖杯,C罗 ...

  10. 技术分享 | 浅谈MySQL闪回的实现

    欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 1.闪回实现原理 2.binlog文件格式初探 3.闪回实现过程 1.闪回实现原 ...