data 옵션을 함수로 반환해야 하는 이유
App은 컴포넌트이다. 따라서 재사용이 가능한데 여러 개의 Vue 애플리케이션을 만들 때 반응형 데이터들을 함수로 만들어서 반환하는 것이 아닌 참조형인 객체 데이터로 반환하게 되면 첫 번째 애플리케이션에서 데이터를 변경할 시 다른 애플리케이션의 데이터도 같이 변경되는 문제가 발생한다.
data를 함수로 만들어서 리턴하면 때마다 data라는 옵션이 실행이 되고 객체 리터럴로 새로운 참조형 데이터를 반환하기 때문에 한 쪽에서 바뀌는 데이터가 다른 애플리케이션의 데이터를 바꾸는 문제가 발생하지 않는다.
data 접근 방식
Vue 인스턴스를 살펴보면 인스턴스를 통해 바로 data에 접근할 수 있고, 인스턴스 내부의 내장 객체 $data를 통해 접근할 수 있다.
동적 데이터를 접근을 할 때는 내장 객체를 통해 접근하는 것이 권장된다.
해당 데이터가 반응형 데이터라는 것을 명시적으로 나타낼 수 있기 때문이다.
반응성 데이터는 data 옵션 내부에 미리 선언을 해야한다.
선언을 하지 않은 데이터는 반응성을 갖지 않는다.
또한 내장 객체 $data에 존재하지 않는다.
여기서 반응성이란 데이터가 변경되면 화면도 변경되는 것을 말한다.
Methods
컴포넌트 인스턴스에 메서드를 추가하려면 methods 옵션을 사용한다.
this 키워드로 data 옵션에 정의해놓은 데이터에 접근할 수 있다.
여기서 this는 vue instance를 말한다. (vm)
이 때 methods를 정의할 때는 화살표 함수를 사용하면 안 된다.
일반 함수의 this는 함수가 실행될 때 정의가 되고
화살표 함수의 this는 함수가 만들어질 때 정의가 되기 때문에
this가 사용되는 개념이 달라지기 때문이다.
함수를 정의할 때만 사용하면 안 되고 그 내부에서 화살표 함수를 정의할 때는 상관 없다.
methods는 일반적으로 템플릿 내부에서 이벤트 리스너로 사용된다.
v-on을 통해 사용할 때는 함수명 뒤에 ()를 쓰지 않는다.
<button @click="increment">Up vote</button>v-bind 디렉티브처럼 표현식으로 입력을 할 때는 ()를 작성해야 한다.
<span :title="toTitleDate(date)">
{{ formatDate(date) }}
</span>추가로 vue는 디바운싱이나 쓰로틀링에 대한 자체적인 지원을 제공하지 않는다.
해당 부분은 Lodash같은 라이브러리를 사용하여 구현할 수 있다.
