在 JavaScript 和 Vue.js 中，对象有多种简写形式可以简化代码。

以下是常见的对象简写方式及示例：

1. 属性简写（同名省略）

当属性名和变量名相同时，可以省略键值：

// 传统写法
const name = 'Alice';
const age = 25;
const user = { 
  name: name, 
  age: age 
};

// 简写形式
const user = { name, age }; 
// 等价于 { name: name, age: age }

2. 方法简写（省略 : function）

对象方法可以省略 : function：

// 传统写法
const obj = {
  sayHello: function() {
    console.log('Hello');
  }
};

// 简写形式
const obj = {
  sayHello() {
    console.log('Hello');
  }
};

3. 计算属性名（动态键名）

使用 [] 包裹表达式作为属性名：

const key = 'user_' + Math.random();
const obj = {
  [key]: 'Alice'  // 键名由表达式计算结果决定
};

4. Vue 特定简写

（1）v-bind 简写

<!-- 传统写法 -->
<img v-bind:src="imageSrc">

<!-- 简写形式 -->
<img :src="imageSrc">

（2）v-on 简写

<!-- 传统写法 -->
<button v-on:click="handleClick">Click</button>

<!-- 简写形式 -->
<button @click="handleClick">Click</button>

5. 对象展开运算符（...）

合并对象时可以使用展开运算符：

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 }; 
// 结果: { a: 1, b: 2 }

6. 解构赋值简写

从对象中提取属性时简写：

const user = { name: 'Alice', age: 25 };

// 传统写法
const name = user.name;
const age = user.age;

// 简写形式
const { name, age } = user;

7. Vuex 中的简写

（1）mapState 简写

// 传统写法
computed: {
  count() {
    return this.$store.state.count;
  }
}

// 简写形式
import { mapState } from 'vuex';
computed: {
  ...mapState(['count'])
}

（2）mapActions 简写

// 传统写法
methods: {
  increment() {
    this.$store.dispatch('increment');
  }
}

// 简写形式
methods: {
  ...mapActions(['increment'])
}

8. 箭头函数简写

对象方法中使用箭头函数时需注意 this 绑定：

const obj = {
  // 传统写法
  sayHi: function() {
    console.log(this.name);
  },

  // 箭头函数简写（会丢失this绑定）
  sayHi: () => {
    console.log(this.name); // 可能得到undefined
  }
};

9. 默认值简写

// 传统写法
const options = {
  timeout: options.timeout || 3000
};

// 简写形式
const options = {
  timeout: 3000 // 直接写默认值
};

这段代码的意思是：定义一个 options 对象，其中 timeout 属性的值取自另一个 options.timeout，如果该值不存在（undefined 或假值），则使用默认值 3000。

实际执行流程

假设外部有一个已存在的 options 对象：

// 外部已有对象
const options = { timeout: 5000 }

// 新定义的 options
const options = {
  timeout: options.timeout || 3000  // 读取外部 options.timeout = 5000
}
// 结果：{ timeout: 5000 }

如果外部 options.timeout 不存在：

const options = {}  // 没有 timeout 属性

const options = {
  timeout: options.timeout || 3000  // undefined || 3000 → 3000
}
// 结果：{ timeout: 3000 }

为什么看起来有点奇怪?

这段代码之所以让人困惑，是因为出现了两个同名的 options：

1. 右侧的 options.timeout：引用的是外部已存在的某个 options 对象（通常在函数参数或上层作用域中定义）
2. 左侧的 const options = {}：是新创建的局部对象

// 更清晰的写法（参数默认值）
function createConfig(options = {}) {
  return {
    timeout: options.timeout || 3000,
    url: options.url || '/api'
  }
}

关键区别总结

这些简写形式能让代码更简洁，但需注意在团队项目中保持风格一致。