Vue中的{}和[]的区别和使用

在Vue中，{} 和 [] 分别用于表示对象字面量（Object Literal）和数组字面量（Array Literal）。

1. {}：花括号 {} 用于创建一个对象字面量，表示一个包含键值对的对象。对象由多个属性组成，每个属性都有一个键和对应的值。

   示例：

   const person = {
     name: 'John',
     age: 30,
     occupation: 'Engineer'
   };
   

   在上述示例中，{} 用于创建一个名为 person 的对象，该对象有三个属性：name、age 和 occupation。

2. []：方括号 [] 用于创建一个数组字面量，表示一个包含多个元素的数组。数组是一个有序的集合，每个元素都有一个索引。

   示例：

   const numbers = [1, 2, 3, 4, 5];
   

   在上述示例中，[] 用于创建一个名为 numbers 的数组，包含了五个元素：1、2、3、4 和 5。

在Vue中，你可以使用对象字面量和数组字面量来定义组件的数据、计算属性、方法等。例如，在Vue组件的 data 选项中，你可以使用对象字面量来定义组件的初始数据。

export default {
  data() {
    return {
      person: {
        name: 'John',
        age: 30,
        occupation: 'Engineer'
      },
      numbers: [1, 2, 3, 4, 5]
    };
  }
};

对象里的key和保存对象的值重名了，可以简写只写一个