03 Vue 인스턴스
3.1 el, data, computed 옵션
data : data옵션에 주어진 모든 속성들은 Vue 인스턴스 내부에서 직접 이용되지 않고 Vue 인스턴스와 Data 옵션에 주어진 객체 사이에 프록시를 두어 처리.
data 옵션은 Vue 인스턴스가 관찰하는 데이터 객체를 의미하므로 변경 사항은 즉시 감지. Vue 인스턴스에 의해 프록시 처리되어 vm.name과 같이 사용하 수 있음. 직접 data 옵션을 통해 접근하고 싶다면 vm.$data.nam 과같이 접근할 수 있음. 내장 옵션들은 모두 $식별자를 앞에 붙이고 있는데 이름 충돌을 피하기 위한 것.
el : Vue 인스턴스에 연결할 HTML, DOM 요소를 지정.
주의할 점은 여러 개 요소에 지정할 수 없다는 것! 이제까지 el 옵션 값으로 ‘#test’와 같이 CSS 선택자 표현을 사용하였으므로 혹시 CSS 클래스 선택자를 사용하면 여러 HTML 요소에 Vue 인스턴스를 연결할 수 있지 않을까 생각할 수도 있지만 여러 개 요소 중 첫 번째 요소에만 연결됨.
실행 도중 동적으로 Vue 인스턴스와 HTML 요소를 연결할 수 있지만(vm.$mount('#test')와 같이 $mount()를 이용해 동적으로 연결가능), el 옵션은 Vue 인스턴스를 생성할 때 미리 지정.
computed : 지정한 값은 함수였지만 Vue 인스턴스는 프록시 처리하여 마치 속성처럼 취급.
sum은 분명 함수. 하지만 vmSum.sum으로 속성 접근 방식을 사용했을 때 정상 실행됨. 이러한 이유로 계산된 속성(Computed Property)라고 함.
3.2 메서드
등록된 메서드는 Vue 인스턴스를 이용해 직접 호출할 수도 있고, 디렉티브 표현식, 콧수염 표현식에서도 사용할 수 있음.
메서드이기 때문에 3행과 같이 sum()으로 호출 구문 형식 사용.
계산형 속성은 종속된 값에 의해 결괏값이 캐싱됨. ex03-02.html에서 vmSum.num이 같은 값이라면 계산된 속성이 sum은 캐싱된 결괏값을 바로 리턴하지만 ex03-03.html sum() 메서드를 매번 실행.
메서드를 사용할 것인지 계산형 속성을 사용할 것인지 결정할 때의 고려사항 중 하나가 캐싱 여부.
메서드 작성시 ECMAScript6가 제공하는 화살표 함수(Arrow Function)는 사용해서는 안됨. 화살표 함수 내부에서는 this가 Vue 인스턴스를 가리키지 않고, 전역 객체(ex:Windows)를 가리키기 때문. 일반적으로 메서드 내부에서 데이터 속성들을 이용하기 때문에 this가 바뀌게 되면 Vue 인스턴스 내부 데이터에 접근할 수 없게 됨.
3.3 관찰 속성
Vue.js에서 하나의 데이터를 기반으로 다른 데이터를 변경할 필요가 있을 때 흔히 사용할 수 있는 것으로 계산형 속성이 있지만 이외에도 관찰 속성이라는 것을 사용할 수 있음. 주로 긴 처리 시간이 필요한 비동기 처리에 적합하다는 특징을 가지고 있음.
비동기 처리의 가장 대표적인 예가 외부 서버와의 통신 기능
3.4 v-cloak 디렉트브
콧수염 표현식의 템플릿 문자열이 잠깐 나타났다 사라지는 것을 보이지 않게 해줌.
3.5 Vue 인스턴스 라이프 사이클
Vue 인스턴스는 객체로 생성되고, 데이터에 대한 관찰 기능을 설정하는 등의 작업을 위해 초기화를 수행. 이 과정에서 다양한 라이프 사이클 훅 메서드를 적용할 수 있음.
| 라이프 사이클 훅 | 설명 |
|---|---|
| beforeCreate | Vue 인스턴스가 생성되고 데이터에 대한 관찰 기능 및 이벤트 감시자 설정 전에 호출 |
| create | Vue 인스턴스가 생성된 후에 데이터에 대한 관찰 기능, 계산형 속성, 메서드, 감시자 설정이 완료된 후 호출 |
| beforeMount | 마운트가 시작되기 전에 호출 |
| mounted | el에 vue 인스턴스의 데이터가 마운트된 후에 호출 |
| beforeUpdate | 가상DOM이 렌더링, 패치되기 전에 데이터가 변경될 때 호출. 이 훅에서 추가적인 상태 변경을 수행할 수 있음. 하지만 추가로 다시 렌더링하지는 않음. |
| updated | 데이터의 변경으로 가상 DOM이 다시 렌더링되고 패치된 후에 호출 이 훅이 호출되었을 때는 이미 컴포넌트의 DOM이 업데이트된 상태, 그래서 DOM에 종속성이 있는 연산을 이 단계에서 수행할 수 있음. |
| beforeDestroy | Vue 인스턴스가 제거되기 전에 호출 |
| destroyed | Vue 인스턴스가 제거된 후에 호출. 이 훅이 호출될 때는 Vue 인스턴스의 모든 디렉티브의 바인딩이 해제되고, 이벤트 연결도 모두 제거됨. |