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一直是一对相爱相杀的“情敌”。虽然iOS系统以其流畅性和安全性著...

苹果和安卓系统的来源,探寻两大... 你有没有想过，我们每天离不开的手机，那个小小的屏幕里，竟然藏着两个如此不同的世界？一个是由苹果公司精...

安卓变苹果最新系统,探索最新i... 你知道吗？最近安卓用户们都在热议一件大事——安卓系统终于要变脸了，而且这次的变化可是相当大呢！没错，...

王者定位怎么关安卓系统,轻松实... 你是不是也和我一样，对王者荣耀这款游戏爱得深沉呢？不过，有时候游戏里的设置让人头疼，比如安卓系统的王...

树莓派安卓系统流畅,打造便携式... 亲爱的读者们，你是否曾想过，将树莓派与安卓系统结合，会擦出怎样的火花呢？今天，就让我带你一起探索这个...

安卓系统智能机顶盒,引领家庭娱... 你有没有想过，家里的电视也能变得智能起来？没错，就是那个陪伴我们多年的老电视，现在也能摇身一变，成为...

安卓系统很差了吗现在,性能优劣... 最近是不是有不少朋友在讨论安卓系统的问题呢？有人说它越来越差了，也有人觉得它还是那个熟悉的“老朋友”...

安卓系统uc安装包,Andro... 你有没有发现，手机里的安卓系统越来越强大了？今天，咱们就来聊聊这个话题——安卓系统中的UC安装包。你...

安卓系统谷歌能删吗,谷歌能否删... 你有没有想过，那个一直陪伴你手机生活的安卓系统，它背后的谷歌爸爸，是不是也能被你随意删掉呢？这可不是...

安卓系统会不会更耗电,解析其功... 你有没有发现，手机用着用着，电池就有点不给力了？尤其是那些用安卓系统的手机，有时候感觉电就像流水一样...

安卓系统中无效目录,安卓系统无... 你有没有遇到过在安卓系统中，明明文件夹就在那里，但是就是找不到的情况？别急，今天就来给你揭秘安卓系统...

国产安卓机哪个系统好用,探寻最... 你有没有想过，国产安卓机哪个系统最好用呢？这可是个让人纠结的问题，毕竟每个系统都有它的特色和亮点。今...

安卓系统cpua9,引领性能与... 你有没有发现，最近你的安卓手机运行得是不是比以前顺畅多了？这可多亏了那个强大的安卓系统CPUA9啊！...

安卓系统usb驱动程序,功能、... 你有没有遇到过这种情况：手机里存了那么多宝贝照片和视频，想传输到电脑上保存，结果电脑却像个小顽皮，死...

安卓操作系统怎么关闭,轻松关闭... 手机里的安卓操作系统是不是有时候让你觉得有点儿烦呢？别急，今天就来手把手教你如何轻松关闭安卓操作系统...