当前位置: 首页 > 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也设置一下超时时间比较好。

http://www.lryc.cn/news/322716.html

相关文章:

  • 1236 - 二分查找
  • CPP容器vector和list,priority_queue定义比较器
  • How to install PyAlink on Ubuntu 22.04
  • Java部署运维
  • 0-Flume(1.11.0版本)在Linux(Centos7.9版本)的安装(含Flume的安装包)
  • cad vba 打开excel并弹窗打开指定文件
  • 应急救援装备无人机是否必要?无人机在应急救援中的具体应用案例有哪些?
  • 模态框被div class=modal-backdrop fade in覆盖的问题
  • 关于msvcp140.dll丢失的解决方法详情介绍,修复dll文件的安全注意事项
  • AJAX-Promise
  • [Spark SQL]Spark SQL读取Kudu,写入Hive
  • python统计分析——t分布、卡方分布、F分布
  • onlyoffice创建excel文档
  • 交通事故档案管理系统|基于JSP技术+ Mysql+Java+Tomcat的交通事故档案管理系统设计与实现(可运行源码+数据库+设计文档)
  • Chrome 114 带着侧边栏扩展来了
  • 【论文笔记】RobotGPT: Robot Manipulation Learning From ChatGPT
  • 深度学习 Lecture 4 Adam算法、全连接层与卷积层的区别、图计算和反向传播
  • uniApp中使用小程序XR-Frame创建3D场景(1)环境搭建
  • AI基础知识(4)--贝叶斯分类器
  • 填补市场空白,Apache TsFile 如何重新定义时序数据管理
  • Docker 笔记(七)--打包软件生成镜像
  • 图论06-飞地的数量(Java)
  • Java设计模式之单例设计模式
  • 多维时序 | MATLAB实现BiTCN-selfAttention自注意力机制结合双向时间卷积神经网络多变量时间序列预测
  • 深入了解Android垃圾回收机制
  • 如何学好Python语言
  • 计算机408网课评测+资料分享
  • 使用 ZipArchiveInputStream 读取压缩包内文件总数
  • JavaScript对象修饰教程
  • 转置卷积(transposed-conv)