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. Note -「Dijkstra 求解 MCMF」

    食用前请先了解 SPFA + Dinic/EK 求解 MCMF. Sol. 总所周知,SPFA 牺牲了.于是我们寻求一些更稳定的算法求解 MCMF. 网络流算法的时间属于玄学,暂且判定为混乱中的稳定. ...

  2. Template -「矩阵 - 行列式」

    #include <cstdio> int Abs(int x) { return x < 0 ? -x : x; } int Max(int x, int y) { return ...

  3. 总结下对我对于CSS中BFC的认知

    首先第一个,什么是BFC? BFC的全称叫Block  Formatting  Context   (块级格式化上下文)BFC是css中隐含属性,开启BFC后元素会变成一个独立的布局环. 简单来说,它 ...

  4. python 线程理解

    简介 一个应用程序由多个进程组成,一个进程有多个线程,一个线程则是操作系统调度的最小单位,当应用程序运行时,操作系统根据优先级和时间片调度线程(决定此时此刻执行哪个线程). python的线程 pyt ...

  5. C++ 内存模型 write_x_read_y 试例构造

    之前一段时间偶然在 B 站上刷到了南京大学蒋炎岩(jyy)老师在直播操作系统网课.点进直播间看了一下发现这个老师实力非凡,上课从不照本宣科,而且旁征博引又不吝于亲自动手演示,于是点了关注.后来开始看其 ...

  6. Nginx 集群部署(Keepalived)

    # Nginx集群部署 # 当我们的用户同时访问量达到一定量的时候,一台服务器是不够用的 # 这个时候我们需要解决这个问题肯定是要添加新的服务器去处理用户访问 # 多台服务器处理用户访问就需要我们集群 ...

  7. 万答#21,如何查看 MySQL 数据库一段时间内的连接情况

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 查看方式 已知至少有两种方式可以实现 1.开启 general_log 就可以观察到 开启命令 mysql> set ...

  8. Regular采样类定义和测试

    这个算法是均匀采样算法,继承于Sampler类. 类声明: #pragma once #ifndef __REGULAR_HEADER__ #define __REGULAR_HEADER__ #in ...

  9. 开源风吹动开源心 ~ 8月16日,你若来,我们(Apache)在等你!

    点击上方蓝字关注ALC Beijing 抢! 太好看了吧! 买它,就是它,买它! 要抢! ALC是Apache Local Community的缩写,是全世界范围的 Apache 开源爱好者本地群组. ...

  10. (一)esp32开发环境搭建(VSCode+IDF实现单步调试)

    保姆级手把手教学视频 https://www.bilibili.com/video/BV1RL411A7CU 前言 因为碰上一个学长,跟他聊了会儿天,推荐我做一点物联网的项目,想来想去,那就用WiFi ...