在 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 // 直接写默认值
};

关键区别总结

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