- 컴포넌트 인스턴스는 Proxy 타입이다
data
- data 메서드가 return 하는 객체에 data를 넣는다
- data가 메서드(새 객체)가 아니라 속성(참조)으로 해서 객체를 값으로 받는다면 일어나는 일
⇒ 참조형 데이터인 객체나 배열을 그대로 쓰면, 같은 곳을 바라보기 때문에 하나의 인스턴스의 데이터값을 속성으로 변경하면(ex. app.count = 2) 다른 인스턴스의 데이터 값도 같이 변경된다
⇒ 사실 이 개념은 배열과 객체라면 모두 해당되는 사안이다
인스턴스.데이터로 접근도 가능하고,인스턴스.$data.데이터로도 접근 가능하다.- $data : 인스턴스의 내장 객체 중의 하나
- 동적으로 data에 접근할 때 같은 경우에는, 인스턴스[’데이터’]보다
인스턴스.$data[’데이터’]가 반응형 데이터라는 것을 명확히 할 수 있어서 더 권장
- data메서드 객체에 선언하지 않고 전역으로 인스턴스.데이터=값 형태로 선언한다면 반응성을 가지지 않는다. 즉, 해당 data 값을 바꿔도 화면은 변하지 않는다.
methods
- 속성 ⇒ 메서드들을 프로퍼티로 갖는 객체를 값으로 한다
- this는 컴포넌트 인스턴스를 참조
- 따라서 프로퍼티에 메소드를 정의할 때는, 화살표 함수가 아닌 일반 함수여야 한다. (화살표 함수는 생성된 곳을 this로 가리킴)
- v-bind나 중괄호 두개에서 호출할 때는 메소드() 형태로 호출, v-on에서는 메소드이름만 명시
- vue에는 디바운싱이나 쓰로틀링에 대한 지원 제공x, Lodash같은 라이브러리를 사용해서 구현 가능