Vue复制动态属性后输入框双向绑定联动所有产品而非单个

你写的复制逻辑完全触发了JS的引用赋值规则，直接导致所有产品的属性集合绑定到了同一块内存区域。
核心逻辑链：

• JS里的对象类型（也就是你存属性的attributes集合）是引用类型，变量持有的从来不是对象本身的实体值，只是指向堆内存中对象存储位置的引用地址。
• 项目初始阶段，每个产品都是独立初始化的属性集合，各自的引用地址完全隔离，所以双向绑定改任意产品的属性，都不会影响其他产品的输入框状态。
• 你写的赋值语句this.products[i].attributes = this.products[this.product_active].attributes，本质是把激活产品的属性集合的引用地址，直接覆盖赋值给其他产品的同名字段，全程没有生成独立的属性对象副本。循环执行完之后，所有产品的attributes字段实际上指向了堆内存里同一个共享的对象。
• 后续不管你在哪个产品的输入框输入内容，本质都是在修改这个被所有产品共享的公共属性对象，自然所有绑定到这个对象的输入框都会同步显示相同内容，出现全量联动的异常。

把原来的引用赋值逻辑，替换为生成独立对象副本的操作，保证每个产品最终持有自己独立内存地址的属性集合，几种适配不同场景的写法：

• 如果属性是单层结构的普通键值对，可以用展开运算符做浅拷贝：this.products[i].attributes = { ...this.products[this.product_active].attributes }
• 如果属性存在多层嵌套结构，需要用深拷贝生成完全独立的副本，现代浏览器/Node环境可以直接用原生结构化克隆方法：this.products[i].attributes = structuredClone(this.products[this.product_active].attributes)
• 如果需要兼容极低版本的运行环境，且属性都是没有特殊类型的纯可序列化数据，也可以用JSON序列化的方式生成独立副本：this.products[i].attributes = JSON.parse(JSON.stringify(this.products[this.product_active].attributes))

修复完成后，每个被同步属性的产品拿到的都是和激活产品初始属性值完全一致的全新独立对象，因为引用地址完全隔离，后续修改任意单个产品的属性，都只会影响自身的输入框绑定状态，不会再出现跨产品的联动问题。

内容的提问来源于stack exchange，提问作者Sukhchain Singh