vue.js - 인스턴스 생명주기
Vue 인스턴스 생명 주기
- 크게 생성, 초기화, 갱신, 소멸의 4가지 단계로 구분됩니다.
생성(Create) 단계
- 이벤트와 생명주기 메소드가 초기화됩니다.
- 메소드 옵션, 계산된 속성 등 Vue인스턴스의 속성으로 바인딩하고 데이터 속성 변화를 감시하도록 설정합니다.
초기화(Mount) 단계
- 템플릿을 읽어와 Vue문법을 적용하고 화면에 해당 값을 렌더링합니다.
갱신(Update) 단계
- 데이터 속성의 변화를 감지하면 화면을 다시 렌더링합니다.
- 이때 Virtual DOM을 활용하여 렌더링합니다.
소멸(Destroy) 단계
- 데이터의 반응을 헤제 및 이벤트를 삭제하고 Vue인스터스를 메모리에서 해제합니다.
Lifecycle Hooks
- 각 단계 시작과 끝에 개발자가 임의의 작업을 수행할 수 있도록 Hooking함수를 제공합니다.
- Hooking함수를 사용하는 방법은 Vue인스턴스 생성시 전달 옵션에 후킹하고자 하는 라이프사이클 메소드 이름을 콜백함수로 작성해 전달하면 됩니다.
- 라이프 사이클 메소드 옵션의 종류로는 아래와 같습니다.
- beforeCreate, created
- beforeMount, mounted
- beforeUpdate, updated
- beforeDestroy, destroyed
- 주의점으로 es6이상을 사용하고 있다면 => 를 이용한 함수 사용하면 안됩니다. 그 이유는 화살표 함수는 부모 컨텍스트에 바인딩되는데, 후킹함수의 this는 Vue인스턴스를 가르키기 때문에, 오류를 발생합니다.
code pen- vue life cycle example
컴포넌트와 생명주기
- 컴포넌트는 Vue인스턴스의 일종으로, 일반 Vue인스턴스와 동일한 라이프 사이클을 가집니다.
- 따라서 1 컴포넌트 == 1 Vue 인스턴스 입니다.
ps. 찾아보고 공부하면서 정리하는 내용이라 틀릴 수 있음을 알려드립니다.
참고