当前位置: 首页 > news >正文

Vue3 大量赋值导致reactive响应丢失问题

问题阐述

       

        如上图所示,我定义了响应式对象arr=reactive({data:[]}),尝试将indexedDB两千条数据一口气赋值给arr.data。但事与愿违,页面上的{{}}在展示先前数组的三秒后变为空。

问题探究

vue3的响应应该与console.log有异曲同工之妙,如下图所示,我使用console.log打印reactive对象时,会访问即时数据,此时赋值操作并未结束,列表元素为空?!但当我们展开这个reactive对象会发现数组此时此刻有731个元素(无特殊意义)。

问题解决

        从其他文章得到灵感,我们可以把赋值操作搬进cursorGetData(db, storeName,target)这个函数里,通过数组对象内置的push函数添加元素,可以使reactive保持响应,并持续更新数据,直到游标走完。(内部target能修改外部arr.data应该是浅拷贝的缘故)

        推此及彼,axios.post也设置一下超时时间比较好。

相关文章:

  • 显卡基础知识及元器件原理分析
  • Linux hdparm命令教程:优化硬盘性能和读写速度(附实例详解和注意事项)
  • Design Script官方案例解析2:程序简写
  • 从后端获取文件数据并导出
  • 应急响应靶机训练-Web3题解
  • 【Frida】10_用鼠标自动标记棋盘上的雷区(一键过关)
  • C/C++炸弹人游戏
  • spring cloud gateway k8s优雅启停
  • (C语言)球球大作战
  • 十、C#基数排序算法
  • 实时数仓之实时数仓架构(Doris)
  • Svg Flow Editor 原生svg流程图编辑器(三)
  • Java安全 反序列化(4) CC1链-LazyMap版
  • LLM - 大语言模型的分布式训练 概述
  • 如何关闭路由器的5G Wi-Fi
  • [译]如何构建服务器端web组件,为何要构建?
  • [原]深入对比数据科学工具箱:Python和R 非结构化数据的结构化
  • 《Javascript数据结构和算法》笔记-「字典和散列表」
  • 【刷算法】从上往下打印二叉树
  • Javascripit类型转换比较那点事儿,双等号(==)
  • JavaScript HTML DOM
  • mysql_config not found
  • orm2 中文文档 3.1 模型属性
  • Shadow DOM 内部构造及如何构建独立组件
  • spring boot下thymeleaf全局静态变量配置
  • SpringBoot 实战 (三) | 配置文件详解
  • Stream流与Lambda表达式(三) 静态工厂类Collectors
  • Windows Containers 大冒险: 容器网络
  • 从地狱到天堂,Node 回调向 async/await 转变
  • 动手做个聊天室,前端工程师百无聊赖的人生
  • 分布式熔断降级平台aegis
  • 给初学者:JavaScript 中数组操作注意点
  • 观察者模式实现非直接耦合
  • 区块链将重新定义世界
  • 小程序01:wepy框架整合iview webapp UI
  • 译米田引理
  • 用Python写一份独特的元宵节祝福
  • ​flutter 代码混淆
  • # Pytorch 中可以直接调用的Loss Functions总结:
  • #、%和$符号在OGNL表达式中经常出现
  • (1)bark-ml
  • (32位汇编 五)mov/add/sub/and/or/xor/not
  • (4)(4.6) Triducer
  • (C语言)字符分类函数
  • (day6) 319. 灯泡开关
  • (delphi11最新学习资料) Object Pascal 学习笔记---第2章第五节(日期和时间)
  • (附源码)基于SSM多源异构数据关联技术构建智能校园-计算机毕设 64366
  • (十八)三元表达式和列表解析
  • (转)项目管理杂谈-我所期望的新人
  • .NET CF命令行调试器MDbg入门(一)
  • .NET Core引入性能分析引导优化
  • .NET Micro Framework 4.2 beta 源码探析
  • .NET MVC之AOP
  • .net6+aspose.words导出word并转pdf
  • .NetCore 如何动态路由