Vue中修改models属性同步改变defaults属性的问题求助

你遇到的问题核心是JavaScript对象的引用传递机制：当你直接把this.defaults[type]推入models数组时，并没有复制出一个全新的对象，只是把原对象的引用存进了数组。这就导致models里的对象和defaults里的原对象指向同一块内存空间，修改任意一方的属性，另一方都会同步变化。

解决方法：创建对象的副本（断开引用） #

因为你的defaults里的对象都是单层结构（没有嵌套对象），用浅拷贝就能解决问题，有两种常用方式：

方式1：对象展开语法（ES6+，最简洁）

修改你的appendSocial函数：

appendSocial(type){
    // 展开原对象的所有属性到新对象，创建独立副本
    const newSocial = {...this.defaults[type]};
    // 给新对象生成唯一ID，解决v-for的key重复警告（原id为null）
    newSocial.id = Date.now() + Math.random();
    this.models.push(newSocial);
}

方式2：Object.assign()

如果需要兼容旧环境，可以用这个方法：

appendSocial(type){
    // 把原对象的属性复制到空对象，生成新副本
    const newSocial = Object.assign({}, this.defaults[type]);
    newSocial.id = Date.now() + Math.random();
    this.models.push(newSocial);
}

额外优化：修复v-for的key问题 #

原来的代码中v-bind:key="model.id"，但defaults里的id是null，当添加多个同类型的社交链接时，会出现重复的key，导致Vue渲染警告。上面的代码里给新对象生成了唯一ID，就能解决这个问题。

现在再测试：添加的每个社交链接都是独立的对象，修改models里的属性不会影响defaults，多次添加同类型链接也会使用默认的初始值。

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