关于Vue的响应式原理,可以看官方文档或其他资料,
https://www.jianshu.com/p/34de360d6035
data里定义了一个数组arr,数组的元素可以是同样格式的数组arrChild(数组嵌套),如果只改变最外层的元素即arr的元素,视图可以更新,如果改变的是arrChild里边的数据(内层元素),视图不会自动更新。
比如有这样一个功能:根据id删除删除一条数据,需要循环遍历整个数组及子数组,
this.removeData(this.data, id)
removeData (items, id) {
items.forEach((item, index)=>{if (item.id ===id) {
items.splice(index,1)
console.log('这相等了', item, items)returnitems
}if(item.children) {
item.children= (this.removeData(item.children, id))//使用splice方法去更新改变后的子数组,
items.splice(index, 1, item)
}
})
console.log(2, this.poi++, items)returnitems
}
如果有子数组则递归调用removeData方法, 在修改子数组后,返回该子数组,使用splice方法更新该数组元素。
data :
data: [{
id:'1',
code:'0001',
name:'测试数据1',
status:'启用',
remark:'测试数据测试数据'}, {
id:'2',
code:'0002',
name:'测试数据2',
status:'启用',
remark:'测试数据测试数据',
children: [{
id:'01',
code:'00001',
name:'测试数据01',
status:'启用',
remark:'测试数据测试数据'}, {
id:'02',
code:'00002',
name:'测试数据02',
status:'启用',
remark:'测试数据测试数据',
children: [{
id:'001',
code:'000001',
name:'测试数据001',
status:'启用',
remark:'测试数据测试数据'}, {
id:'002',
code:'000002',
name:'测试数据002',
status:'启用',
remark:'测试数据测试数据'}]
}]
}, {
id:'3',
code:'0003',
name:'测试数据3',
status:'启用',
remark:'测试数据测试数据'}, {
id:'4',
code:'0004',
name:'测试数据4',
status:'启用',
remark:'测试数据测试数据'}]
PS:
拷贝对象或者数组时,可以使用扩展运算符 "..."。如果对象或者数组中包含子对象和子数组,使用JSON.parse(JSON.stringify(str)) 。
const obj3 = {...obj}
const itemsCopy = [...items]
const itemsCopySub = JSON.parse(JSON.stringify(items))