자바스크립트에서 객체를 생성했을때 속성을 정의하는 방법은 두가지가 있다.
1. 객체 축약 문법을 사용한 방법
export default {
name: 'app',
data() {
return {
testStatus: false,
};
},
};
ES6의 객체 축약 문법을 사용한 방법이고
2. 객체 리터럴 문법을 사용한 방법
export default {
name: 'app',
data: {
loadingStatus: false,
},
};
이 두 가지 방법의 가장 큰 차이점은 자바스크립트 객체를 생성하는 방식이다.
첫 번째 방법은 data 속성을 함수로 정의하고, 그 함수가 호출될 때마다 새로운 객체를 생성하여 반환한다.
이렇게 함으로써 각 컴포넌트 인스턴스가 고유한 데이터 객체를 가지게 되고
따라서 컴포넌트 간에 데이터가 공유되지 않는다.
두 번째 방법은 data 속성을 일반적인 객체 리터럴로 정의하는 것이다.
이 경우에는 컴포넌트 인스턴스들이 모두 같은 데이터 객체를 공유하게 된다.
따라서 여러 개의 인스턴스가 같은 데이터를 공유할 필요가 있을 때 사용한다.
보통 첫 번째 방법을 사용하여 컴포넌트 인스턴스마다 고유한 데이터를 가지도록 구현하고
Vue에서는 전자만 사용한다.
'JavaScript' 카테고리의 다른 글
trim() 함수 (0) | 2024.06.10 |
---|---|
import 시 index.js 생략 (0) | 2024.05.07 |
onkeydown, onkeyup, onkeypress (0) | 2024.03.25 |
CK Editor (1) | 2024.03.13 |
웹 애니메이션 구현 방법 (0) | 2024.02.28 |