当前位置: 首页 > news >正文

Vue3中的toRef和toRefs的区别和用法

刚做了Ref和Reactive区别及使用方法笔记,再来总结一下,toReftoRefs 的作用、用法、区别

1、作用和区别

toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref,而且它既保留了响应式,也保留了引用,也就是你从 reactive 复制过来的属性进行修改后,除了视图会更新,原有 ractive 里面对应的值也会跟着更新。

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

2、使用方式

2.1 toRef使用示例

<template><h2>reactive-name: {{ user.name }} </h2><h2>toRef-name: {{ uName }}</h2><button @click="onChangeName">点击</button>
</template><script>
import { reactive, toRef } from 'vue'
export default {setup() {let user = reactive({name: 'zs',age: 18})// 复制 user 里的 name 属性let uName = toRef(user, 'name')// 更改  const onChangeName = () => {uName.value = 'ls'}return {user,uName,onChangeName}}
}
</script> 

2.2 toRefs使用示例

<template><h2>{{ name }} </h2><h2>{{ age }}</h2> 
</template><script>
import { reactive, toRef } from 'vue'
export default {setup() {let user = reactive({name: 'zs',age: 18}) return {...toRefs(user),}}
}
</script> 
http://www.lryc.cn/news/417131.html

相关文章:

  • 【docker快捷部署系列一】docker快速入门,安装docker,解决运行Docker Quickstart Terminal出错
  • vulnhub靶机实战_DC-8
  • 如何做到项目真实性优化?保姆级写简历指南第五弹!
  • Python Beautiful Soup介绍
  • NDI Tools汉化版的安装
  • 【JAVA多线程】AQS,JAVA并发包的核心
  • springcloud loadbalancer nacos无损发布
  • React原理
  • React-Native优质开源项目
  • Ajax-02
  • 供应商较多的汽车制造业如何选择供应商协同平台?
  • 【开端】JAVA Mono<Void>向前端返回没有登陆或登录超时 暂无权限访问信息组装
  • Python(模块---pandas+matplotlib+pyecharts)
  • 解决使用Navicat连接数据库时,打开数据库表很慢的问题
  • nginx重启报错nginx: [error] invalid PID number
  • 人工智能深度学习系列—深度学习中的相似性追求:Triplet Loss 全解析
  • 26. Hibernate 如何自动生成 SQL 语句
  • 预言机(Oracle machine)
  • 55、PHP实现插入排序、二分查找
  • [Git][分支设计规范]详细讲解
  • c#中winfrom需要了解的
  • 操作系统03:调度算法和文件系统
  • 大量中国高清地图,必须收藏!!
  • 无线领夹麦克风哪个品牌好,2024年收音麦哪个品牌好一点
  • 如何解决.NET8 类库Debug时,Debug文件夹中不包含Packages中引入的文件
  • 域名安全详解
  • 使用gstreamer命令行解析RTSP流
  • 如何基于离线包中“事件热点”进行二次开发
  • 使用继电器实现门电路(1)常用门电路的简化实现
  • 程序员常用单词分类