vue3 | isRef、unref、toRef、toRefs
isRef
检查某个值是否是ref
。是返回true
,否则返回false
。
const num = ref(10);
const num1 = 20;
const num2 = reactive({ data: 30 });
console.log(isRef(num)); //true
console.log(isRef(num1)); //false
console.log(isRef(num2)); //false
unref()
如果参数是ref
,则返回内部值,否则返回参数本身。
这是 val = isRef(val) ? val.value : val
计算的一个语法糖。
console.log(unref(num));
console.log(unref(num1));
console.log(unref(num2));
toRef
介绍
基于响应式对象上的某个属性,创建一个对应的 ref。创建出来的 ref 会跟源属性保持同步:更改了 ref 的值就会更改源属性的值,反之亦然。
- 参数一:操作对象
- 参数二:对象属性
const val = reactive({
num: 1,
});
const numRef = toRef(val, "num");
// 更改该 ref 会更新源属性
numRef.value++;
console.log(val.num); // 2
// 更改源属性也会更新该 ref
val.num++;
console.log(numRef.value); // 3
使用场景
toRef()
这个函数在你想把一个 prop 的 ref 传递给一个组合式函数时会很有用当我们向组件传递 props 数据时,如果想要某个数据同父组件同步更新。当 toRef
与组件 props 结合使用时,关于禁止对 props 做出更改的限制依然有效。尝试将新的值传递给 ref 等效于尝试直接更改 props,这是不允许的。在这种场景下,可以使用watch
去监听我们定义ref()
对象。
<template>
<n-modal :show="props.visible">
<n-card
style="width: 600px"
title="编辑"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
<n-input v-model:value="inputValue"></n-input>
<template #footer>
<n-el class="flex justify-end">
<n-space>
<n-button @click="emits('cancel')">取消</n-button>
<n-button @click="emits('save', inputValue)">确定</n-button>
</n-space>
</n-el>
</template>
</n-card>
</n-modal>
</template>
<script lang="ts" setup>
import { toRef, watch, ref } from 'vue'
const props = defineProps<{
visible: boolean
value: string
}>()
const emits = defineEmits<{
(e: 'save', data: string): void
(e: 'cancel'): void
}>()
const valueToRef = toRef(props, 'value')
const inputValue = ref(props.value)
watch(
() => valueToRef.value,
(v) => (inputValue.value = v)
)
</script>
<style></style>
const visible = ref(true)
const inputValue = ref('哈哈哈哈')
const handleSave = (v: string) => {
console.log('v', v)
}
const handleCancel = () => {
visible.value = false
}
<Demo :value="inputValue" :visible="visible" @save="handleSave" @cancel="handleCancel" />
注:
视图更新的问题
参考: https://www.cnblogs.com/web-learn/p/16725393.html
toRefs()
将一个响应式对象转换为一个普通对象,这个普通对象的每个属性都指向源对象相应的属性的ref
。每个单独的ref
都是使用toRef()
创建的。
const val = reactive({
num: 1,
});
const numRef = toRefs(val);
// 更改该 ref 会更新源属性
numRef.num.value++;
console.log(val.num); // 2
// 更改源属性也会更新该 ref
val.num++;
console.log(numRef.num.value); // 3
toRefs()
解构出来的对象不会失去响应性。
如下:
const obj = reactive({
num: 10,
num2: 20,
});
const { num1, num2 } = toRefs(obj);
toRefs
在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref,请改用 toRef
。
vue3 | isRef、unref、toRef、toRefs的更多相关文章
- vue3 的 ref、isRef、toRef、toRefs、toRaw 详细介绍
ref.isRef.toRef.toRefs.toRaw 看着一堆类似的东西,一个头两个大,今天整理一篇文章详细介绍它们的功能及区别. 1.ref ref 属性除了能够获取元素外,也可以使用 ref ...
- Vue3全家桶升级指南二ref、toRef、toRefs的区别
ref是对原始数据的拷贝,当修改ref数据时,模板中的视图会发生改变,但是原始数据并不会改变. toRef是对原始数据的引用,修改toRef数据时,原始数据也会发生改变,但是视图并不会更新. 在vue ...
- vue3.0和2.0的区别,Vue-cli3.0于 8月11日正式发布,更快、更小、更易维护、更易于原生、让开发者更轻松
vue3.0和2.0的区别Vue-cli3.0于 8月11日正式发布,看了下评论,兼容性不是很好,命令有不少变化,不是特别的乐观vue3.0 的发布与 vue2.0 相比,优势主要体现在:更快.更小. ...
- # Vue3 toRef 和 toRefs 函数
Vue3 toRef 和 toRefs 函数 上一篇博文介绍了 vue3 里面的 ref 函数和 reactive 函数,实现响应式数据,今天主要来说一下 toRef 函数和 toRefs 函数的基本 ...
- .NET 基础 一步步 一幕幕[面向对象之方法、方法的重载、方法的重写、方法的递归]
方法.方法的重载.方法的重写.方法的递归 方法: 将一堆代码进行重用的一种机制. 语法: [访问修饰符] 返回类型 <方法名>(参数列表){ 方法主体: } 返回值类型:如果不需要写返回值 ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- atitit.管理学三大定律:彼得原理、墨菲定律、帕金森定律
atitit.管理学三大定律:彼得原理.墨菲定律.帕金森定律 彼得原理(The Peter Principle) 1 彼得原理解决方案1 帕金森定律 2 如何理解墨菲定律2 彼得原理(The Pete ...
- 【完全开源】知乎日报UWP版(下篇):商店APP、github源码、功能说明。Windows APP 良心出品。
目录 说明 功能 截图+视频 关于源码和声明 说明 陆陆续续大概花了一个月的时间,APP算是基本完成了.12月份一直在外出差,在出差期间进行了两次功能完善,然后断断续续修补了一些bug,到目前为止,我 ...
- Windows Server 2012 磁盘管理之 简单卷、跨区卷、带区卷、镜像卷和RAID-5卷
今天给客户配置故障转移群集,在Windows Server 2012 R2的系统上,通过iSCSI连接上DELL的SAN存储后,在磁盘管理里面发现可以新建 简单卷.跨区卷.带区卷.镜像卷.RAID-5 ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
随机推荐
- Android10 dex2oat实践
最近看到一篇博客:Android性能优化之Android 10+ dex2oat实践,对这个优化很感兴趣,打算研究研究能否接入到项目中.不过该博客只讲述了思路,没有给完整源码.本项目参考该博客的思路, ...
- Aspose.Cell篇章3,设置写入到Excel文件的各种样式及输出
Aspose.Cell的Style.Number设置全部设置 /// <summary> /// 单元格样式编号 /// 0 General General /// 1 Decimal 0 ...
- 【网络】内网穿透方案&FRP内网穿透实战(基础版)
目录 前言 方案 方案1:公网 方案2:第三方内网穿透软件 花生壳 cpolar 方案3:云服务器做反向代理 FRP简介 FRP资源 FRP原理 FRP配置教程之SSH 前期准备 服务器配置 下载FR ...
- bootstrap-table参数
table.bootstrapTable({ url:'/Home/geurl', //请求后台的URL(*) method:'get', //请求方式(*) toolbar:'#toolbar', ...
- Containerd 如何配置 Proxy?
前言 在某些 air gap 场景中,往往需要离线或使用代理 (Proxy), 例如: 需要通过 Proxy pull 容器镜像: Docker Hub: docker.io Quay: quay.i ...
- telnet 退出失败
1. 根据提示,使用ctrl+] ,退出到telnet >界面 2. 使用quit退出 3. 最简单的退出方式,强制退出: ] + Enter键
- 【云原生 · Kubernetes】Kubernetes运维
(1)Node的隔离与恢复 在硬件升级.硬件维护等情况下,需要将某些Node隔离.使用kubectl cordon <node_name>命令可禁止Pod调度到该节点上,在其上运行的Pod ...
- Scala- Cannot run program "powershell.exe": CreateProcess error=5, 拒绝访问
安装scala后,按照官网的helloworld教程学习执行 sbt new scala/hello-world.g8 的时候,出现下图错误. 解决方案:关闭360
- 高效率开发Web安全扫描器之路(一)
一.背景 经常看到一些SRC和CNVD上厉害的大佬提交了很多的漏洞,一直好奇它们怎么能挖到这么多漏洞,开始还以为它们不上班除了睡觉就挖漏洞,后来有机会认识了一些大佬,发现它们大部分漏洞其实是通过工具挖 ...
- jquery 操作样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...