手机网站导航栏特效,做网站怎么与客户谈判,广州网络推广营销公司,下载正品官方网站vue版本为v2.16 数据是数组数据#xff0c;且初始数据为空#xff1b; 当接口返回的数据直接赋值到字段之后导致深层的子项数据无法被监听到#xff1b; 数据结构如下#xff1a;
//数据结构//初始化数据
data:[]
接口返回数据
resData:[{id:,name:且初始数据为空 当接口返回的数据直接赋值到字段之后导致深层的子项数据无法被监听到 数据结构如下
//数据结构//初始化数据
data:[]
接口返回数据
resData:[{id:,name:,value:,fileName:,fileId:,fileSize:,}
]
dataresData;
//错误赋值如下导致fileList不能被监听到
data.foreach(item{if(item.fileIditem.fileName){item.fileList[{name:item.fileName,size:item.fileSize}]}else{item.fileList[];}
})
//正确赋值
data.map((item,idx){if(item.fileIditem.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 和 set和delete两种API来配合使用解决监听不到属性新增删除问题。 拓展 vue 3是通过proxy直接代理整个对象来实现的而不是像Object.defineProperty针对某个属性。 所以只需做一层代理就可以监听同级结构下的所有属性变化包括新增属性和删除属性
