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

vue深层数据响应的问题

vue版本为v2.16
数据是数组数据,且初始数据为空;
当接口返回的数据直接赋值到字段之后导致深层的子项数据无法被监听到;
数据结构如下:

//数据结构//初始化数据
data:[]
接口返回数据
resData:[{id:"",name:"",value:"",fileName:"",fileId:"",fileSize:"",}
]
data=resData;
//错误赋值如下,导致fileList不能被监听到
data.foreach(item=>{if(item.fileId&&item.fileName){item.fileList=[{name:item.fileName,size:item.fileSize}]}else{item.fileList=[];}
})
//正确赋值
data.map((item,idx)=>{if(item.fileId&&item.fileName){Vue.$set(data[idx],'fileList',[{name:item.fileName,size:item.fileSize}]) }else{Vue.$set(data[idx],'fileList',[]) }
})

导致原因:
vue2通过object.defineProperty将对象的key转化成getter/setter的形式来追踪变化,但是这种追踪方式只能追踪到数据的修改,对象的属性的删除和增加,这种形式追踪不到。为此vue提供可 s e t 和 set 和 setdelete两种API来配合使用,解决监听不到属性新增删除问题。
拓展:
vue 3是通过proxy直接代理整个对象来实现的,而不是像Object.defineProperty针对某个属性。
所以,只需做一层代理就可以监听同级结构下的所有属性变化,包括新增属性和删除属性

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

相关文章:

  • 解决Nginx + Vue.js (ruoyi-vue) 单页应用(SPA) 404问题的指南
  • 项目计划表如何制作?使用甘特图制作项目计划表的步骤
  • Flutter-底部分享弹窗(showModalBottomSheet)
  • 初学stm32 --- 时钟配置
  • LeetCode:226.翻转二叉树
  • (css)鼠标移入或点击改变背景图片
  • Unbuntu下怎么生成SSL自签证书?
  • OpenGL ES 03 加载3张图片并做混合处理
  • 深度学习-74-大语言模型LLM之基于API与llama.cpp启动的模型进行交互
  • PyTorch 2.0 中设置默认使用 GPU 的方法
  • 如何在 Ubuntu 22.04 服务器上安装 Jenkins
  • 【一篇搞定配置】如何在Ubuntu上配置单机/伪分布式Hadoop
  • 利用Map集合设计程序,存储城市和对应等级相关信息
  • 【自动驾驶】单目摄像头实现自动驾驶3D目标检测
  • 21 go语言(golang) - gin框架安装及使用(二)
  • Intel(R) Iris(R) Xe Graphics安装Anaconda、Pytorch(CPU版本)
  • 【Unity3D】实现可视化链式结构数据(节点数据)
  • Three.js推荐-可以和Three.js结合的动画库
  • 增强现实(AR)和虚拟现实(VR)的应用
  • 告别机器人味:如何让ChatGPT写出有灵魂的内容
  • 【Threejs】从零开始(六)--GUI调试开发3D效果
  • Cocos Creator 试玩广告开发
  • 快速解决oracle 11g中exp无法导出空表的问题
  • selenium 报错 invalid argument: invalid locator
  • Flink2.0未来趋势中需要注意的一些问题
  • 机械鹦鹉与真正的智能:大语言模型推理能力的迷思
  • 本地电脑使用命令行上传文件至远程服务器
  • 【系统】Windows11更新解决办法,一键暂停
  • 34. Three.js案例-创建球体与模糊阴影
  • Qt同步读取串口