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

热门资讯

安卓系统苹果手机识别,跨界融合... 你知道吗？在科技飞速发展的今天，手机已经成为了我们生活中不可或缺的一部分。而说到手机，安卓系统和苹果...

harmonyos系统是不是安... 亲爱的读者，你是否曾好奇过HarmonyOS系统与安卓系统之间的关系？是不是安卓的“亲戚”？今天，就...

手机怎么装系统安卓,安卓系统安... 手机卡顿了？想给安卓系统来个大变身？别急，跟着我一步步来，保证让你的手机焕然一新！一、准备工作在开始...

安卓Linux系统内网穿透,A... 你有没有想过，你的安卓手机里那些看似普通的APP，其实可能正在悄悄地帮你打通网络世界的任督二脉呢？没...

win怎么安装安卓系统,Win... 亲爱的读者，你是不是对Win系统上的安卓应用垂涎已久，但又苦于不知道如何安装安卓系统呢？别急，今天我...

升级小米平板安卓系统,畅享全新... 你有没有发现，你的小米平板用久了，是不是感觉有点卡呢？别急，今天就来教你怎么给它来个系统升级，让它焕...

捷豹安卓系统车载,捷豹安卓系统... 哇，你有没有想过，当你的手机和汽车融为一体，会是怎样的体验呢？想象你正驾驶着你的捷豹，车窗外的风景如...

安卓1到10系统,安卓1.0至... 你有没有想过，手机里的安卓系统就像是我们生活中的好朋友，从青涩的少年成长为稳重的青年呢？从安卓1.0...

安卓8.0停用系统应用,提升使... 你知道吗？最近安卓系统又来了一次大动作，那就是安卓8.0系统开始停用一些系统应用了。这可真是让人有点...

安卓系统修改mtu值,轻松提升... 你有没有想过，你的安卓手机其实是个小小的电脑呢？它里面藏着许多可以自定义的秘密功能，就像修改MTU值...

安卓平板改window系统,探... 你有没有想过，你的安卓平板其实可以摇身一变，变成一个Windows系统的电脑呢？没错，就是那种可以运...

时空猎人安卓苹果系统,探索无尽... 你知道吗？最近在手机游戏圈里，有一款叫做《时空猎人》的游戏可是火得一塌糊涂呢！不管是安卓用户还是苹果...

安卓9.0系统的电视,新一代电... 亲爱的读者们，你是否也像我一样，对科技新玩意儿充满好奇？今天，我要和你聊聊一个让人眼前一亮的话题——...

小pc安装安卓系统,轻松安装安... 你有没有想过，你的小PC也能变身成为安卓系统的超级玩家呢？没错，就是那个平时默默无闻的小家伙，现在也...

高通备份安卓系统,全方位数据安... 你知道吗？在这个科技飞速发展的时代，手机备份可是个不得不提的话题。尤其是对于安卓用户来说，选择一个靠...

谷歌安卓系统有多少,从诞生到全... 你有没有想过，那个无处不在的谷歌安卓系统，究竟在全球有多少用户呢？它就像一个神秘的数字，每天都在悄悄...

fc黄金传说安卓系统,畅享复古... 你有没有听说最近安卓系统上的一款超酷的游戏——《FC黄金传说》？这款游戏可是让不少玩家都沉迷其中，今...

变小的我安卓系统,安卓系统演变... 你有没有发现，最近你的手机好像变轻了？没错，说的就是你，那个陪伴你多年的安卓系统。它悄无声息地进行了...

vivo安卓系统小彩蛋,体验科... 你知道吗？在vivo的安卓系统中，竟然隐藏着一些超有趣的小彩蛋！这些小彩蛋就像是在手机里埋下的宝藏，...

安卓系统如何强制重启,安卓系统... 手机突然卡壳了，是不是又该给它来个“大保健”了？没错，今天就来聊聊安卓系统如何强制重启。别小看这个看...