uni-app concat合并数组会导致原数组的click失效

开发环境	版本号	项目创建方式
Mac	11.3.1 (20E241)	HBuilderX
HBuilderX	3.1.12
手机系统	手机系统版本号	手机厂商
iOS	IOS 14	苹果
手机机型		iPhone 12

示例代码：

原data: {a:1, b:2, c:3}  

使用concat合并  
data_a = {d:4, e:5}  
this.data = data_a.concat(this.data)  

视图更新了新的数据，但是绑定的@click会失效；  
a，b，c的click都失效了。  
d，e的生效.  

是个BUG吧。

操作步骤：

原data: {a:1, b:2, c:3}  

使用concat合并  
data_a = {d:4, e:5}  
this.data = data_a.concat(this.data)  

视图更新了新的数据，但是绑定的@click会失效；  
a，b，c的click都失效了。  
d，e的生效.  

是个BUG吧。

预期结果：

应该都生效。

实际结果：

更新后，之前的不生效，新增的生效了

bug描述：

concat合并数组会导致原数组的click失效

更多关于uni-app concat合并数组会导致原数组的click失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

ionicwang 1楼

更多关于uni-app concat合并数组会导致原数组的click失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

这不是uni-app的BUG，而是Vue数据响应式机制的问题。

concat()方法返回的是新数组，当你执行this.data = data_a.concat(this.data)时，实际上是创建了一个全新的数组并替换了原来的响应式数组。Vue无法追踪到新数组中来自原数组的元素的绑定关系，导致之前绑定的@click事件失效。

正确的解决方案：

使用push方法（推荐）

data_a.forEach(item => {
    this.data.push(item);
});

使用扩展运算符

this.data = [...data_a, ...this.data];

使用unshift方法

data_a.reverse().forEach(item => {
    this.data.unshift(item);
});