vue3 ref reactive响应式数据 赋值的问题

文章目录

  • vue3 ref reactive响应式数据 赋值的问题
    • 场景1:将响应式数据赋值请求后的数据
      • 错误示范:直接赋值
      • 正确写法
    • 场景2:响应式数据解构之后失去响应式
      • 原因分析
      • 解决办法 toRefs/toRef方法创建ref引用对象

vue3 ref reactive响应式数据 赋值的问题

doing 遇见就记录,最后更新时间23.8.30

场景1:将响应式数据赋值请求后的数据

错误示范:直接赋值

以数组为例,对象也是一样的操作。

let list = ref([])
//let list = reactive([])
async function getList() {list = await httpGetList();  // 直接赋值错误
}
// 请求
function httpGetList() {return new Promise((resolve, reject) => {setTimeout(() => {resolve([1, 2, 3, 4, 5])}, 500)})
}

ref定义的属性等价于reactive({value:xxx}),所以reactive、ref 直接重新赋值丢失响应是因为引用地址变了

正确写法

  • 方法1:ref.value,代码中更为清晰地表明响应式数据
list.value = await httpGetList();
  • 方法2:包一层reactive,可以将一个模块的变量包在一个reactive里面,当作vue2的data
let data = reactive({list:[]
})
async function getList() {data.list = await httpGetList();
}

ref定义的属性等价于reactive({value:xxx}),方法2其实就是参考了该方式。

  • 方法3:更推荐方法1和方法2
let list = reactive([])async function getList2() {let resp = await httpGetList()list.push(...resp)
}

场景2:响应式数据解构之后失去响应式

原因分析

reactive内部的实现是创建一个代理对象Proxy,以及进行了一系列处理。reactive失去效应是不在于Vue而在于Proxy对象本身。
解构相当于将该变量重新赋给(基础数据传值,引用类型传地址)了一个新变量,所以解构之后是一个基础数据则会响应式丢失。如果解构之后是一个引用类型,相当于操作的地址还是被Proxy监管,所以响应式不会丢失。

案例
比如解构之后是基础类型的数据,那么解构相当于copy了一个值。访问时直接访问的这个copy值,跳过了代理,所以不会触发getset
在这里插入图片描述

解决办法 toRefs/toRef方法创建ref引用对象

解构赋值主要还是赋值!对于基本数据类型,函数传递或者对象解构时,会丢失原始数据的引用。

  • toRef(响应式对象,该对象的属性)创建一个ref对象该ref对象value值指向参数对象中的某个属性
    ref对象的value值改变,参数对象中的该属性也会改变,反之也会改变,因为指向同一个地址!本质是引用,与原始数据有关联
    在这里插入图片描述
  • toRefs(obj):返回一个和参数一致的普通对象,只不过属性的值都变成了ref对象,相当于每个属性都执行了一次toRef

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/64646.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DBeaver 23.1.5 发布

导读DBeaver 是一个免费开源的通用数据库工具,适用于开发人员和数据库管理员。DBeaver 23.1.5 现已发布,更新内容如下. Data editor 重新设计了词典查看器面板 UI 空间数据类型:曲线几何线性化已修复 数据保存时结果选项卡关闭的问题已解决…

gitee上传本地项目bug

🤮这个破bug不知道浪费了多长时间,以前没有记录,每次都忘记,这次记下来 问题描述 gitee创建仓库,然后根据它提示的如下命令,但一直报错 原因分析: 把命令复制出来,粘贴到Sublime …

vscode 清除全部的console.log

在放页面的大文件夹view上面右键点击在文件夹中查找 console.log.*$ 注意:要选择使用正则匹配 替换为 " " (空字符串)

CSS中可继承与不可继承属性

可继承 1. 字体属性: font、font-style、font-variant、font-weight、font-size、line-height等属性是字体样式的属性,都可以被子元素继承。 2. 文本属性: color、text-indent、text-align、text-decoration、text-transform、letter-spa…

gitlab-rake gitlab:backup:create 执行报错 Errno::ENOSPC: No space left on device

gitlab仓库备份执行 gitlab-rake gitlab:backup:create报错如下: 问题分析:存储备份的空间满 解决方法: 方法1:清理存放路径,删除不需要文件,释放空间。 方法2:创建一个根目录的挂载点&#x…

C++技术点,故事解析

语言的魅力 从人类诞生开始 ,南方古猿到现代人类经历了非常多变化; 南方古猿到能人 有什么变化? 能人会使用工具,由于会使用工具 就可以获得肉类食物,当然只能吃一些动物腐肉 直到进化成直立人的晚期,在东…

vue3组合式api <script setup> props 父子组件的写法

父组件传入子组个的变量&#xff0c; 子组件是无法直接修改的&#xff0c; 只能通过 emit的方式&#xff0c; 让父组件修改&#xff0c; 之后子组件更新 <template><div class"parent">我是父组件<son :msg"msg" :obj"obj" chan…

C++之父 人生经验和建议:引领程序员走向成功的指南针

原文链接C之父 人生经验和建议&#xff1a;引领程序员走向成功的指南针 1985 年&#xff0c;Bjarne Stroustrup 首次推出了 C编程语言。 历经 38 年的岁月沉淀&#xff0c;他在与 Honeypot.io 平台的一次简短采访中分享了自己的一些人生观点&#xff0c;并幽默地表示&#xff0…

在Visual Studio 2017上配置并使用OpenGL

1 在Visual Studio 2017上配置并使用OpenGL 在GLUT - The OpenGL Utility Toolkit&#xff1a;GLUT - The OpenGL Utility Toolkit中点击“GLUT for Microsoft Windows 95 & NT users”&#xff0c;选择“If you want just the GLUT header file, the .LIB, and .DLL file…

推进数据要素化,数据云为何是“加速器”?

数据要素化&#xff0c;一个世界性难题。 相比于传统生产要素&#xff0c;数据要素具有获得非竞争性、使用非排他性等独有特征&#xff0c;在流通、产权、安全和使用等方面需要法规制度与基础设施的双重保障。 我国无疑是最早探索数据要素化的国家之一。从早期成立的各种大数…

Streamlit 讲解专栏(十一):数据可视化-图表绘制详解(中)

文章目录 1 前言2 绘制交互式散点图3 定制图表主题4 增强数据可视化的交互性与注释步骤1步骤二 5 结语 1 前言 在上一篇博文《 Streamlit 讲解专栏&#xff08;十&#xff09;&#xff1a;数据可视化-图表绘制详解&#xff08;上&#xff09;》中&#xff0c;我们学习了一些关…

Qt5界面Qt Designer上添加资源图片后,ModuleNotFoundError: No module named ‘rcc_rc‘ 的终极解决方案

在网上找了很久都没弄明白&#xff0c;最后还是自己思考解决了。 起因&#xff1a; 用 Qt Designer 添加资源文件作为背景图&#xff0c;编译 \resource\static\qrc> pyuic5 -o .\xx.py .\xx.ui发现在 xx.py 文件末尾中多了一个语句&#xff1a; import rcc_rc然后运行就…

Excel:通过Lookup函数提取指定文本关键词

函数公式&#xff1a;LOOKUP(9^9,FIND($G 2 : 2: 2:G 6 , C 2 ) , 6,C2), 6,C2),G 2 : 2: 2:G$6) 公式解释&#xff1a; lookup第一参数为9^9&#xff1a;代表的是一个极大值的数据&#xff0c;查询位置里面最接近这一个值的数据&#xff1b;lookup第二参数用find函数代替&am…

嵌入式开发-串口通信介绍

串口通信&#xff08;Serial Communications&#xff09;是一种串行数据传输方式&#xff0c;它将数据一位一位地顺序传输&#xff0c;而不是并行传输。这种方式相比并行传输更为节省空间和成本&#xff0c;因此在现代工业和嵌入式系统中得到广泛应用。 串口通信通常使用RS-23…

POI-TL制作word

本文相当于笔记&#xff0c;主要根据官方文档Poi-tl Documentation和poi-tl的使用&#xff08;最全详解&#xff09;_JavaSupeMan的博客-CSDN博客文章进行学习&#xff08;上班够用&#xff09; Data AllArgsConstructor NoArgsConstructor ToString EqualsAndHashCode public …

导入excel数据给前端Echarts实现中国地图-类似热力图可视化

导入excel数据给前端Echarts实现中国地图-类似热力图可视化 程序文件&#xff1a; XinqiDaily/frontUtils-showSomeDatabaseonMapAboutChina/finalproject xin麒/XinQiUtilsOrDemo - 码云 - 开源中国 (gitee.com) https://gitee.com/flowers-bloom-is-the-sea/XinQiUtilsOr…

OpenCV基本操(IO操作,读取、显示、保存)

图像的IO操作&#xff0c;读取和保存方法 1.1 API cv.imread()参数&#xff1a; 要读取的图像 读取图像的方式&#xff1a; cv.IMREAD*COLOR:以彩色模式加载图像&#xff0c;任何图像的图像的透明度都将被忽略。这是默认参数 标志&#xff1a; 1 cv.IMREAD*GRAYSCALE :以…

WebVR — 网络虚拟现实

推荐&#xff1a;使用 NSDT编辑器 快速搭建3D应用场景 虚拟现实设备 随着Oculus Rift和许多其他生产设备即将上市&#xff0c;未来看起来很光明——我们已经有足够的技术来使VR体验“足够好”&#xff0c;可以玩游戏。有许多设备可供选择&#xff1a;像Oculus Rift或HTC Vive这…

不用订阅,不用破解,永久免费使用Axure最新版教程

首先去官网下载最新的axure&#xff0c;你没听错&#xff0c;就是最新的。 下载网址&#xff1a;Axure RP - UX Prototypes, Specifications, and Diagrams in One Tool 下载完后解压安装到本地&#xff0c;并注册属于你自己的账户&#xff0c;开始试用。可惜的是只有30天的试…

C++:类和对象(下)

目录 1. 再谈构造函数 1.1构造函数题赋值 1.2初始化列表 初始化列表有什么用呢? 1.3 explicit关键字 2. Static成员 2.1概念 2.2特性 3. 友元 3.1友元函数 3.2友元类 4. 内部类(了解) 5.匿名对象 6.拷贝对象时的一些编译器优化 学习目标 1. 再谈构造函数2. Stat…