뷰 인스턴스

뷰 인스턴스 생성자

---

뷰를 new Vue()와 같이 인스턴스를 생성할 때 이를 생성자라 표현한다.

Vue 인스턴스를 생성하고 나면 뷰 라이브러리를 로딩하게되고, 이후에 접근할 수 있다.

뷰 인스턴스 유효 범위

---

뷰 인스턴스는 HTML의 특정한 범위 내에서만 속성들이 적용된다.

이를 인스턴스의 유효 범위라고 한다.

인스턴스를 생성하고 난 후(new Vue()), 화면에 인스턴스 속성을 적용하는 과정은 아래와 같다.

뷰 라이브러리 로딩

▼

인스턴스 객체 생성

(옵션 속성 포함)

▼

특정 화면 요소에 인스턴스를 붙임

▼

인스턴스 내용이 화면 요소로 변환

▼

변환된 화면 요소를 사용자가 확인

뷰 인스턴스 라이프 사이클

---

뷰 인스턴스는 생성될 때 8개의 라이프 사이클이 존재한다.

(Do it! Vue.js 입문 책의 저자 캡틴 판교님의 설명 참고)

이 그림은 뷰 인스턴스가 생성되고 나서 화면에 인스턴스가 부착된 후 소멸되기까지의 전체적인 흐름이다.

각 라이프 사이클 속성에서 실행되는 로직을 라이프 사이클 훅이라 한다.

• beforeCreate

인스턴스가 생성되고 나서 가장 처음 실행되는 라이프 사이클 단계이다.

이 단계에서는 data 속성과 methods 속성이 아직 인스턴스에 정의되지 않은 상태이며, DOM 요소에 접근할 수 없다.

• created

data 속성과 methods 속성이 정의되었기 때문에 this를 이용하여 this.data, this.fetchData()와 같은 로직들을 이용해 data 속성과 methods 속성에 정의된 값에 접근할 수 있다.

단, 인스턴스가 화면 요소에 부착되기 전이므로 template 속성에 정의된 DOM 요소에 접근할 수 없다.

컴포넌트가 생성된 후 실행되는 단계이므로 서버에 데이터를 요청하여 받아오는 로직을 처리하기 좋은 단계이다.

• beforeMount

template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후, el 속성에 지정한 화면 요소에 인스턴스를 부착하기 전 호출되는 단계이다.

render() 함수가 호출되기 직전의 로직을 작성하기 좋은 단계이다.

 - render()는 자바스크립트로 화면의 DOM을 그리는 함수다.

• mounted

el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 난 후 호출되는 단계이다.

template 속성에 정의한 DOM에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계이다.

단, 돔에 인스턴스가 부착되자마자 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있다.

 - 이러한 경우 $nextTick() API를 활용하여 HTML 코드로 최종 파싱될 때까지 기다린 후 DOM 제어 로직을 사용하면 된다.

• beforeUpdate

관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계이다.

변경 예정인 새 데이터에 접근할 수 있으므로, 변경 예정 데이터의 값과 관련된 로직을 처리하기 좋은 단계이다.

이 단계에서 값을 변경하는 로직을 넣더라도 화면에 다시 그려지지는 않는다.

el 속성에서 지정한 DOM에 인스턴스가 부착되고나면 인스턴스에 정의한 속성들이 화면에 치환되어 붙어진다.

치환된 값은 $watch 속성으로 감시한다. 이를 데이터 관찰이라 한다.

• updated

데이터가 변경된 후 가상 돔으로 다시 화면을 그리고 나서 실행되는 단계이다.

데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계이다.

이 단계에서 데이터의 값을 변경하면 무한 루프에 빠질 수 있다.

따라서 값을 변경해야한다면 computed, watch와 같은 속성을 사용해야한다.

가급적이면 값을 변경하는 로직은 beforeUpdate 라이프 사이클에서 처리하고 updated 라이프 사이클에서는 변경 데이터의 DOM과 관련된 로직을 추가하는 것을 권장한다.

• beforeDestroy

뷰 인스턴스가 파괴되기 직전에 호출되는 단계이다.

이 단계에서는 아직 인스턴스에 접근할 수 있으며, 뷰 인스턴스의 데이터를 삭제하기 좋은 단계이다.

• destroyed

뷰 인스턴스가 파괴되고 난 후 호출되는 단계이다.

뷰 인스턴스에 정의한 모든 속성이 제거되고, 하위에 선언한 인스턴스들도 모두 파괴된다.

해당 내용은 'Do it! Vue.js 입문'을 참고하여 공부한 내용을 정리한 글입니다.