简介:我是在使用uni-app图片上传功能发现的他们自间一个区别。
Vue响应式的工作原理:
Vue 通过代理对象属性的方式来追踪数据的变化。当数据发生变化时,例如对象被重新赋值或数组被改变为新的数组引用,框架才能正确地更新视图。
1、我创建了一个响应式的数组
//图片回显的属性
let fileList = reactive([]);
2、当我使用push方法时,这种写法是直接在 fileList
数组的末尾添加 obj
,并返回修改后的数组长度。虽然数组内容变了,但是它并没有改变 fileList
在内存中的引用地址,因此 Vue 的响应式系统无法检测到数组内容的变化,因而不会更新相关的视图。
//物品的图片回显
if (goods.image) {
let imgs = goods.image.split(',');
for (let i = 0; i < imgs.length; i++) {
imgUrl.value.push(imgs[i]);
let obj = { url: '' };
obj.url = imgs[i];
fileList.push(obj);
}
}
3、当我使用concat()方法时,这种写法会创建一个新的数组,将 obj
添加到 fileList
的末尾,并将结果赋值给 fileList
。如果 fileList
是一个响应式数组,这种赋值操作会触发 Vue 的响应式系统去更新相关的视图。
//物品的图片回显
if (goods.image) {
let imgs = goods.image.split(',');
for (let i = 0; i < imgs.length; i++) {
imgUrl.value.push(imgs[i]);
let obj = { url: '' };
obj.url = imgs[i];
fileList = fileList.concat(obj);
}
}
4、concat() 和push()之间的区别
- 返回值:
.concat()
返回一个新数组,原数组不变。.push()
返回修改后的数组的新长度,并且直接修改原数组。- 对原数组的影响:
.concat()
不改变原数组。.push()
直接修改原数组。- 参数:
.concat()
可以接受多个数组或值作为参数。.push()
可以接受多个值作为参数,将它们依次添加到数组末尾。