Vue3笔记_03(组合式API)toRef
admin
2024-02-24 12:49:05
0次
目录
- 导入
- toRef函数
- 语法
- 作用
- 使用时机
- 举例说明
导入
需求：
后端返回的数据是一个嵌套式数据(info)，这些数据都需要在页面上进行渲染、修改; ->将其定义为一个响应式数据return出去；
但是呢有的数据使用比较频繁，比如 name(简单数据类型),soninfo(引用数据类型); 为了更方便使用 -> 定义为一个变量return出去
html
为了测试展示全部信息->{{info}}name:{{name}}
sonname:{{soninfo.name}}
js1
- 发现
-
初次渲染没有问题；
-
当 点击“点我修改info.name”按钮时 页面内容无变化(即使数据已经改变了)；
- 页面
- name无变化
- info对象里面的name也无变化；
- 打印
- name已经变化了
- info对象里面的name无变化
- 总结：name 为非响应式数据且与info对象里面的name属性没有关联了
- 页面
-
当 点击“点我修改soninfo.name”按钮时。页面内容能正常渲染；
- soninfo 与 info.soninfo 会对应实时改变
-
采用直接赋值形式，为什么简单数据类型不能正常修改，而引用类型却可以正常修改呢？
// 定义一个变量let name = info.nameconsole.log(name) // 'xiangxiang'let soninfo = info.soninfo console.log(soninfo) // Proxy {name: 'niuniu', age: 24, grandinfo: {…}}
- 通过打印发现
- 简单数据类型赋值， 赋值的是值 -> 因此获取到的只是一个字符串(非响应式数据)
- 引用数据类型赋值， 赋值的是引用地址 -> 因此获取到的是一个Proxy实例对象(响应式数据)
如果想要简单数据类型赋值应该怎样才能获取一个响应式数据呢？
—> 使用组合APItoRef函数
toRef函数
语法
// 引入
import {reactive,toRef} from 'vue'// 使用
let 变量名 = toRef(reactive对象，属性名)
作用
创建一个 ref 对象，其value值指向另一个对象中的某个属性;
使用时机
当要将响应式对象中的某个值为简单数据类型的属性单独提供给外部使用时就使用toRef;
举例说明
导入中的例子使用toRef就可以实现了
为了测试展示全部信息->{{info}}name:{{name}}
sonname:{{soninfo.name}}
相关内容
热门资讯
【MySQL】锁
锁 文章目录锁全局锁表级锁表锁元数据锁（MDL）意向锁AUTO-INC锁...
【内网安全】 隧道搭建穿透上线...
文章目录内网穿透-Ngrok-入门-上线1、服务端配置：2、客户端连接服务端ÿ...
GCN的几种模型复现笔记
引言 本篇笔记紧接上文，主要是上一篇看写了快2w字，再去接入代码感觉有点...
数据分页展示逻辑
import java.util.Arrays;import java.util.List;impo...
Redis为什么选择单线程？R...
目录专栏导读一、Redis版本迭代二、Redis4.0之前为什么一直采用单线程？三、R...
【已解决】ERROR: Cou...
正确指令： pip install pyyaml
关于测试，我发现了哪些新大陆
关于测试 平常也只是听说过一些关于测试的术语，但并没有使用过测试工具。偶然看到编程老师...
Lock 接口解读
前置知识点Synchronized synchronized 是 Java 中的关键字，...
Win7 专业版安装中文包、汉...
参考资料：http://www.metsky.com/archives/350.htm...
3 ROS1通讯编程提高(1)
3 ROS1通讯编程提高3.1 使用VS Code编译ROS13.1.1 VS Code的安装和配置...
大模型未来趋势
大模型是人工智能领域的重要发展趋势之一，未来有着广阔的应用前景和发展空间。以下是大模型未来的趋势和展...
python实战应用讲解-【n...
目录 如何在Python中计算残余的平方和 方法1：使用其Base公式 方法2：使用statsmod...
学习u-boot 需要了解的m...
一、常用函数 1. origin 函数 origin 函数的返回值就是变量来源。使用格式如下...
常用python爬虫库介绍与简...
通用 urllib -网络库(stdlib)。 requests -网络库。 grab – 网络库&...
药品批准文号查询|药融云-中国...
药品批文是国家食品药品监督管理局（NMPA）对药品的审评和批准的证明文件...
【2023-03-22】SRS...
【2023-03-22】SRS推流搭配FFmpeg实现目标检测 说明： 外侧测试使用SRS播放器测...
有限元三角形单元的等效节点力
文章目录前言一、重新复习一下有限元三角形单元的理论1、三角形单元的形函数（Nÿ...
初级算法-哈希表
主要记录算法和数据结构学习笔记，新的一年更上一层楼！ 初级算法-哈希表...
进程间通信【Linux】
1. 进程间通信 1.1 什么是进程间通信 在 Linux 系统中，进程间通信...
【Docker】P3 Dock...
Docker数据卷、宿主机与挂载数据卷的概念及作用挂载宿主机配置数据卷挂载操作示例一个容器挂载多个目...