Vue3笔记_03(组合式API)toRef_民生

Vue3笔记_03(组合式API)toRef

admin

2024-02-24 12:49:05

0次

导入

需求：
后端返回的数据是一个嵌套式数据(info)，这些数据都需要在页面上进行渲染、修改; ->将其定义为一个响应式数据return出去；
但是呢有的数据使用比较频繁，比如 name(简单数据类型),soninfo(引用数据类型); 为了更方便使用 -> 定义为一个变量return出去

html

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就可以实现了

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：数据结构作业：传输数据的增删改

下一篇：Qt QSS中 background-image，border-image，以及image属性差别

热门资讯

手机在安装安卓系统,从解锁Bo... 手机在安装安卓系统：你的专属升级之旅想象你的手机就像一辆老式老爷车，虽然坚固耐用，但已经跟不上时代的...

安卓怎样释放系统空间,高效清理... 手机里的空间总是不够用，是不是你也和我一样，时不时地收到“存储空间不足”的提醒？别急，今天就来教你几...

联想安卓系统广告关闭,享受清爽... 亲爱的手机控们，你们是不是也和我一样，对安卓手机上的广告感到无比烦恼呢？那些无处不在的广告，不仅占用...

系统映像安卓系统x86,PC端... 哇，你有没有想过，在电脑上也能畅玩安卓游戏，体验安卓应用呢？没错，这就是今天我要跟你分享的神奇之旅—...

安卓系统屏幕下端按钮,功能解析... 亲爱的手机控们，你是否曾为安卓系统屏幕下端的那些小按钮而感到好奇呢？它们看似平凡，却隐藏着大大的秘密...

安卓系统如何调头像,Andro... 亲爱的手机控们，你们有没有想过，手机里的头像可是我们个性的小标志呢！今天，就让我来带你一起探索如何在...

安卓系统怎么把照片,Andro... 你有没有想过，手机里的照片怎么才能变得井井有条呢？尤其是安卓系统，操作起来是不是有点小复杂？别急，今...

安卓360强刷系统,安卓360... 你那安卓手机是不是已经卡到不行了？别急，今天就来教你一招——安卓360强刷系统！这可不是什么高深莫测...

什么系统安卓手机通用,基于通用... 你有没有想过，为什么你的安卓手机不能像电脑那样，随心所欲地安装各种版本的安卓系统呢？今天，就让我带你...

windows远程安卓系统下载... 哇，你有没有想过，在Windows电脑上也能轻松使用安卓系统呢？没错，这就是今天我要跟你分享的神奇之...

安卓系统手机刷任务,步骤、技巧... 亲爱的手机控们，你们是不是也和我一样，对安卓系统手机刷任务充满了好奇和期待呢？想象你的手机就像一辆老...

逍客安卓系统usb,“逍客安卓... 亲爱的车主朋友们，你们有没有想过，你的逍客安卓系统USB接口，竟然能玩出这么多花样？今天，就让我带你...

安卓系统导航不带CD,拥抱智能... 你有没有发现，现在很多车里的导航系统都变成了安卓系统，而且它们好像都不带CD播放功能了呢？这可让那些...

安卓系统和iOS系统运行原理,... 你有没有想过，为什么你的手机可以轻松地打开各种应用，而你的朋友却只能用那几个固定的？这背后，其实是安...

安卓清除系统软件,安卓系统软件... 亲爱的手机控们，你们是不是也和我一样，对那些安卓手机里自带的系统软件感到烦恼呢？它们不仅占用了宝贵的...

安卓卸载系统应用app,无需R... 手机里的系统应用，有时候就像那些黏人的小跟班，总在你最不想它们出现的时候跳出来。今天，就让我来带你一...

安卓系统实现闪信,安卓系统闪信... 亲爱的安卓手机用户们，你们有没有想过，在信息爆炸的时代，如何让你的信息脱颖而出，直接跳进对方的视线里...

盒子怎么刷安卓系统,盒子刷安卓... 亲爱的读者朋友们，你是不是也和我一样，家里的安卓盒子用久了，总觉得有点卡，想要给它来个焕然一新的变身...

安卓系统怎么刷锤子系统,操作指... 你有没有想过给你的安卓手机换换口味？别看它现在运行得风生水起，偶尔来点新鲜感也是不错的。今天，就让我...

物本安卓系统盒,引领智能生活... 亲爱的读者们，你是否曾想过，在繁忙的生活中，如何让科技为你的日常带来一丝轻松与便捷？今天，我要给大家...