Vue.js中如何合并多个对象且保留各自独立结构？

当然可行！而且完全不用给属性加前缀这种繁琐操作，用ES6的对象字面量语法就能轻松实现你想要的两种结构，完美保留两个地址对象的独立结构，不会出现属性覆盖的问题。

方式一：合并为包含两个子对象的父对象（推荐） #

这是最直观也最实用的方式，直接把两个原始对象作为新对象的属性即可，利用ES6的对象简写语法，代码非常简洁：

// 你的原始对象
const deliveryAddress = { 
  firstName: null, lastName: null, companyName: null, 
  jobTitle: null, address1: null, address2: null, 
  city: null, country: null, province: null, 
  region: null, state: null, zipCode: null, 
  phoneNumber: null, email: null 
};
const billingAddress = { 
  billingDifferentFromDelivery: false, billingAddress1: null, 
  billingAddress2: null, billingCity: null, billingCountry: null, 
  billingState: null, billingProvince: null, billingZipCode: null 
};

// 合并为父对象，保留各自独立结构
const addressInformation = {
  deliveryAddress,
  billingAddress
};

这里的deliveryAddress和billingAddress是ES6的简写语法，等价于deliveryAddress: deliveryAddress，省去了重复书写的麻烦。之后你可以通过addressInformation.deliveryAddress.firstName或者addressInformation.billingAddress.billingCity直接访问对应属性，结构清晰明了。

方式二：合并为数组形式 #

如果业务场景需要数组结构，也可以轻松实现，有两种写法可选：

写法1：直接将两个对象放入数组 #

const addressInformation = [deliveryAddress, billingAddress];

这种方式下，你可以通过索引访问：addressInformation[0]是配送地址，addressInformation[1]是账单地址。

写法2：数组元素为带标识的对象（更清晰） #

如果担心索引不够直观，可以给每个数组元素加上明确的键名：

const addressInformation = [
  { deliveryAddress },
  { billingAddress }
];

此时访问方式为addressInformation[0].deliveryAddress，结构更明确。

为什么之前的方式会出现覆盖？ #

你之前用var obj1 = {...obj2, ...obj3}的方式，是把两个对象的顶层属性合并到同一个对象中，当两个对象有同名顶层属性时，后面的对象属性会覆盖前面的。而我们现在的方式是把整个原始对象作为新对象的子属性，相当于把它们“包裹”起来，自然不会有属性冲突的问题。

在Vue项目中，如果你是在组件的data里定义这些对象，直接这样合并也不会破坏响应式，Vue会正常追踪子对象的属性变化~

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