객체 속성을 정의하는 두가지 방법

자바스크립트에서 객체를 생성했을때 속성을 정의하는 방법은 두가지가 있다.

 

1. 객체 축약 문법을 사용한 방법

export default {
  name: 'app',
  data() {
    return {
      testStatus: false,
    };
  },
};

 

ES6의 객체 축약 문법을 사용한 방법이고

 

2. 객체 리터럴 문법을 사용한 방법

export default {
  name: 'app',
  data: {
    loadingStatus: false,
  },
};

 

이 두 가지 방법의 가장 큰 차이점은 자바스크립트 객체를 생성하는 방식이다.

첫 번째 방법은 data 속성을 함수로 정의하고, 그 함수가 호출될 때마다 새로운 객체를 생성하여 반환한다.

 

이렇게 함으로써 각 컴포넌트 인스턴스가 고유한 데이터 객체를 가지게 되고

따라서 컴포넌트 간에 데이터가 공유되지 않는다.

두 번째 방법은 data 속성을 일반적인 객체 리터럴로 정의하는 것이다.

이 경우에는 컴포넌트 인스턴스들이 모두 같은 데이터 객체를 공유하게 된다.

따라서 여러 개의 인스턴스가 같은 데이터를 공유할 필요가 있을 때 사용한다.

보통 첫 번째 방법을 사용하여 컴포넌트 인스턴스마다 고유한 데이터를 가지도록 구현하고

 

Vue에서는 전자만 사용한다.