concat() 和push()的区别 ，以及Vue响应式的工作原理

简介：我是在使用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() 可以接受多个值作为参数，将它们依次添加到数组末尾。