vue深层数据响应的问题

news2026/2/15 21:42:40

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.coloradmin.cn/o/2262979.html

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

相关文章

docker(wsl)命令 帮助文档

WSL wsl使用教程 wsl -l -v 列出所有已安装的 Linux 发行版 wsl -t Ubuntu-22.04 --shutdown 关闭所有正在运行的WSL发行版。如果你只想关闭特定的发行版 wsl -d Ubuntu-22.04 登录到Ubuntu环境 wsl --list --running 查看正在wsl中运行的linux发行版 wsl --unregister (系统名…

2024年09月机器人一级理论真题答案及解析

一、单选题 1、如图,下列哪个选项是机器人? ( ) A、a B、b C、c D、d 解析: 根据提供的图片和选项,选项B(b)与图片中显示的机器人外观相符,因此B是正确答案。 2、智能机器人属…

Web开发 -前端部分-CSS

CSS CSS&#xff08;Cascading Style Sheet&#xff09;:层叠样式表&#xff0c;用于控制页面的样式&#xff08;表现&#xff09;。 一 基础知识 1 标题格式 标题格式一&#xff1a; 行内样式 <!DOCTYPE html> <html lang"en"><head><meta…

【数据集】车内视角拍摄道路路面缺陷数据集1075张3类标签YOLO+VOC格式

数据集格式&#xff1a;VOC格式YOLO格式 压缩包内含&#xff1a;3个文件夹&#xff0c;分别存储图片、xml、txt文件 JPEGImages文件夹中jpg图片总计&#xff1a;1075 Annotations文件夹中xml文件总计&#xff1a;1075 labels文件夹中txt文件总计&#xff1a;1075 标签种类数&am…

vue3使用axios请求接口,先报错301,然后报错404

一、问题描述 在开发项目需求的时候&#xff0c;碰到一个奇怪的错误&#xff0c;先报错301&#xff0c;然后报错404&#xff0c;如上图所示。但是项目的其他接口请求都是正常的。 二、错误原因及解决方法 接口url的末尾缺少斜杠 /&#xff0c;加上就好了。 原url&#xff1a;…

当我用影刀AI Power做了一个旅游攻略小助手

在线体验地址&#xff1a;旅游攻略小助手https://power.yingdao.com/assistant/ca1dfe1c-9451-450e-a5f1-d270e938a3ad/share 运行效果图展示&#xff1a; 话不多说一起看下效果图&#xff1a; 智能体的截图&#xff1a; 工作流截图&#xff1a; 搭建逻辑&#xff1a; 其实这…

.NET 技术 | 调用系统API创建Windows服务

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…

2024告别培训班 数通、安全、云计算、云服务、存储、软考等1000G资源分享

大类有&#xff1a;软考初级 软考中级 软考高级 华为认证 华三认证&#xff1a; 软考初级&#xff1a; 信息处理技术员 程序员 网络管理员 软考中级&#xff1a; 信息安全工程师 信息系统监理师 信息系统管理工程师 嵌入式系统设计时 数据库系统工程师 电子商务设…

Java设计模式 —— 【结构型模式】适配器模式(类的适配器、对象适配器、接口适配器)详解

文章目录 基本介绍一、类的适配器二、对象适配器三、接口适配器总结 基本介绍 生活中有很多例子&#xff1a; 不同国家的插座接口不同&#xff0c;需要转换器&#xff1b;家用电源220V&#xff0c;手机只接受5V充电&#xff0c;需要转换器&#xff1b;读卡器&#xff0c;拓展…

游泳溺水识别数据集,对9984张原始图片进行YOLO,COCO JSON, VOC XML 格式的标注,平均识别率在91.7%以上

游泳溺水识别数据集&#xff1a; 对9984张原始图片进行YOLO&#xff0c;COCO JSON, VOC XML 格式的标注&#xff0c;平均识别率在91.7&#xff05;以上 &#xff0c;可识别泳池或者水库中是否有人溺水。 数据集分割 训练组98&#xff05; 9818图片 有效集&#xff05;…

满足更多业务需求:HZERO平台可视化大屏功能升级

前言 报表平台 报表平台是一款全面的数据可视化和报表生成工具&#xff0c;该平台支持多种数据源类型&#xff0c;包括Oracle、MySQL、HIVE等主流数据库及非关系型数据库&#xff0c;通过标准SQL、脚本SQL、API等多种方式灵活配置数据集&#xff0c;满足复杂数据结构需求。还…

Linux下部署MySQL8.0集群 - 主从复制(一主两从)

目录 一、部署前准备 1、查看系统信息 # 查看系统版本 cat /etc/red* # 查看系统位数 getconf LONG_BIT[rootlocalhost ~]# cat /etc/red* CentOS Linux release 7.5.1804 (Core) [rootlocalhost ~]# getconf LONG_BIT 642、下载对应安装包 进入MySQL官网&#xff1a;https:…

web3跨链桥协议-Nomad

项目介绍 Nomad是一个乐观跨链互操作协议。通过Nomad协议&#xff0c;Dapp能够在不同区块链间发送数据&#xff08;包括rollups&#xff09;&#xff0c;Dapp通过Nomad的合约和链下的代理对跨链数据、消息进行验证、传输。其安全通过乐观验证机制和欺诈证明制约验证者实现&…

【CSS in Depth 2 精译_080】 13.1:CSS 渐变效果(中)——不同色彩空间的颜色插值算法在 CSS 渐变中的应用

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第四部分 视觉增强技术 ✔️【第 13 章 渐变、阴影与混合模式】 ✔️ 13.1 渐变 ✔️ 13.1.1 使用多个颜色节点&#xff08;上&#xff09;13.1.2 颜色插值方法&#xff08;中&#xff09; ✔️13.1…

讯飞智文丨一键生成WordPPT

在当今数字化办公的浪潮中&#xff0c;Word和PPT已经成为职场人士日常工作的标配工具。然而&#xff0c;面对繁琐的内容编辑和格式调整任务&#xff0c;如何提升效率成了每个人的追求。而讯飞智文&#xff0c;一款结合人工智能技术的文字处理与演示文稿工具&#xff0c;正逐渐成…

Android Studio的笔记--BusyBox相关

BusyBox 相关 BusyBoxandroid上安装busybox和使用示例一、下载二、移动三、安装和设置环境变量四、使用 busybox源码下载和查看 BusyBox BUSYBOX BUSYBOX链接https://busybox.net/ 点击链接后如图 点击左边菜单栏的Get BusyBix中的Download Source 跳转到busybox 的下载源码…

【机器学习】机器学习的基本分类-强化学习(Reinforcement Learning, RL)

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是一种基于试错的方法&#xff0c;旨在通过智能体与环境的交互&#xff0c;学习能够最大化累积奖励的策略。以下是强化学习的详细介绍。 强化学习的核心概念 智能体&#xff08;Agent&#xff09; 执行动作并与环境…

博世智驾新动力:Apache DolphinScheduler如何征服数据处理挑战

视频及PPT等相关资料&#xff1a;点击查看 讲师介绍 陶超权&#xff0c;博世智驾&#xff08;中国&#xff09;后端工程师&#xff0c;负责数据处理和数据调度方面工作&#xff0c;在智能驾驶数据处理领域具有丰富的实践经验。在2024年12月Apache DolphinScheduler社区线上交流…

令牌(token)+加密(加盐)

目录 一,令牌技术 1,不使用session的原因: 2,有两种解决方案: (1)服务器层面的 (2)客户端层面的(JWT令牌) 生成签名: 生成jwt令牌: 验证令牌是否合法: (3)令牌实际运用 二,加密加盐: 进行加密: 进行验证: 一,令牌技术 1,不使用session的原因: 登录页面,用户会将密…

Flask入门:打造简易投票系统

目录 准备工作 创建项目结构 编写HTML模板 编写Flask应用 代码解读 进一步优化 结语 Flask,这个轻量级的Python Web框架,因其简洁和易用性,成为很多开发者入门Web开发的首选。今天,我们就用Flask来做一个简单的投票系统,让你快速上手Web开发,同时理解Flask的核心概…