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属性差别

热门资讯

安卓系统用的华为应用,探索智能... 你知道吗？在安卓系统里，华为的应用可是个宝库呢！它们不仅功能强大，而且使用起来超级方便。今天，就让我...

安卓变ios系统魅蓝你知道吗？最近有个朋友突然告诉我，他要把自己的安卓手机换成iOS系统，而且还是魅蓝品牌的！这可真是让...

幻书启世录安卓系统,安卓世界中... 亲爱的读者们，你是否曾在某个夜晚，被一本神奇的书所吸引，仿佛它拥有着穿越时空的力量？今天，我要带你走...

电脑安装安卓系统进不去,安卓系... 电脑安装安卓系统后竟然进不去，这可真是让人头疼的问题啊！你是不是也遇到了这种情况，心里直呼“怎么办怎...

用键盘切换控制安卓系统,畅享安... 你有没有想过，用键盘来控制你的安卓手机？是的，你没听错，就是那个我们每天敲敲打打的小玩意儿——键盘。...

小米安卓镜像系统在哪,小米安卓... 你有没有想过，你的小米手机里有一个隐藏的宝藏——安卓镜像系统？没错，就是那个可以让你的手机瞬间变身成...

安卓手机下载排班系统,高效排班... 你有没有想过，每天忙碌的工作中，有没有什么好帮手能帮你轻松管理时间呢？今天，就让我来给你介绍一个超级...

桌面组件如何弄安卓系统,桌面组... 亲爱的桌面爱好者们，你是否曾梦想过将安卓系统搬到你的电脑桌面上？想象那些流畅的动画、丰富的应用，还有...

安卓13系统介绍视频,新功能与... 亲爱的读者们，你是否对安卓13系统充满好奇？想要一探究竟，却又苦于没有足够的时间去研究？别担心，今天...

车机安卓7.1系统,功能升级与... 你有没有发现，现在的车机系统越来越智能了？尤其是那些搭载了安卓7.1系统的车机，简直就像是个贴心的智...

安卓系统下如何读pdf,And... 你有没有遇到过这种情况：手机里存了一大堆PDF文件，可是怎么也找不到一个能顺畅阅读的工具？别急，今天...

安卓系统全国通用的吗,畅享智能... 你有没有想过，为什么你的手机里装的是安卓系统呢？安卓系统，这个名字听起来是不是有点神秘？今天，就让我...

假苹果手机8安卓系统,颠覆传统... 你有没有想过，如果苹果手机突然变成了安卓系统，会是怎样的景象呢？想象那熟悉的苹果外观，却运行着安卓的...

安卓12.0系统vivo有吗,... 你有没有听说最近安卓系统又升级啦？没错，就是那个让手机焕然一新的安卓12.0系统！那么，咱们国内的手...

核心芯片和安卓系统,探索核心芯... 你知道吗？在科技的世界里，有一对“黄金搭档”正悄悄改变着我们的生活。他们就是——核心芯片和安卓系统。...

如何调安卓系统屏幕颜色,安卓系... 亲爱的手机控们，你是否曾觉得安卓系统的屏幕颜色不够个性，或者是因为长时间盯着屏幕而感到眼睛疲劳？别担...

旧台式电脑安装安卓系统,轻松安... 你那台旧台式电脑是不是已经服役多年，性能逐渐力不从心，却又不忍心让它退役呢？别急，今天就来教你怎么给...

美国要求关闭安卓系统,科技霸权... 美国要求关闭安卓系统：一场技术革新还是政治博弈？在数字化时代，智能手机已经成为我们生活中不可或缺的一...

安卓系统日记本你有没有发现，手机里的安卓系统日记本，简直就是记录生活点滴的宝藏库呢？想象每天忙碌的生活中，有没有那...

安卓手机广告最少的系统,探索安... 你有没有发现，用安卓手机的时候，广告总是无处不在，让人烦得要命？不过别急，今天我要给你揭秘一个秘密—...