[Vue] export default 내부 구조

 

 

 

 

 

 

 스크립트에서는 다른 모듈을 import 할수 있고, script 내에서 export를 통해 컴포넌트를 조정하거나, 컴포넌트에서 필요한 data들을 제공하기도 한다  script에서는 객체 하나를 export하고 있다. 아래 내용은 이 객체 안에 property로 들어갈 목록과 그 역할이다.

 

 

▶ data

 vue component에서는 무언가를 return하는 함수를 넣어줘야 한다.
만약 Vue 객체의 인스턴스를 선언한다면, 함수 대신 객체를 넣어도 괜찮다.

data를 함수로 선언해야 할 때 화살표 함수를 사용하면 안된다. this 바인딩이 안되기 때문이다.

 

 

▶ methods

 method들을 정의한다. method 객체에는 함수들이 들어가며, 이 함수들은 다른 method에서 혹은 템플릿에서 사용될 수 있다. method 안에도 화살표 함수를 사용하면 안된다. this를 인식하지 못하는 사태가 벌어진다.

 

 

▶ computed

 computed는 method와 유사하지만 computed에서 사용하고 있는 data에 변화가 있으면 자동으로 계산되는 함수들의 모음이다. computed 역시 마찬가지로 화살표 함수를 사용하면 안된다. computed는 methods와 달리 캐싱이라는 개념이 있어, 같은 페이지 내에서 같은 연산을 여러번 해야 한다면 성능면에서 효율적으로 사용할 수 있다

 

▶ watch

 watch는 computed와 비슷하지만 많은 옵션이 존재한다. 데이터 변경의 응답으로 비동기식 계산이 필요한 경우나 시간이 많이 소요되는 계산을 할 때 watch를 사용하는 편이 좋다.

 

 

▶ props / propsData

propsData는 new를 이용한 인스턴스 생성때만 사용되며, 단위 테스트를 쉽게 하기 위한 용도이다.