关于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) return items } if (item.children) { item.children = (this.removeData(item.children, id)) // 使用splice方法去更新改变后的子数组, items.splice(index, 1, item) } }) console.log(2, this.poi++, items) return items }
如果有子数组则递归调用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:
const obj3 = {...obj}
const itemsCopy = [...items]
const itemsCopySub = JSON.parse(JSON.stringify(items))