徐州网站建设制作工作室千享科技网站建设

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提供可$set和$delete两种API来配合使用，解决监听不到属性新增删除问题。
拓展：
vue 3是通过proxy直接代理整个对象来实现的，而不是像Object.defineProperty针对某个属性。
所以，只需做一层代理就可以监听同级结构下的所有属性变化，包括新增属性和删除属性