Vue 생명주기

Vue 인스턴스 라이프 사이클

인스턴스 생성 시 데이터 관찰, 템플릿 컴파일, DOM 에 객체 연결, 데이터 변경 시 DOM 을 업데이트 하게 된다.

 

① Creation: 컴포넌트 초기화 단계
컴포넌트가 DOM에 추가되기 전, 클라이언트단과 서버단 렌더링 모두에서 처리해야 할 일로 아직 컴포넌트가 돔에 추가되기 전이기 때문에 돔에 접근하거나 this.$el를 사용할 수 없다.

- beforeCreate
Vue.JS의 라이프 사이클 훅 중에서 가장 먼저 실행 되는 훅입니다. data와 이벤트($on, $once, $off, $emit), 감시자($watch)등이 설정 되기 전에 호출되는 라이프 사이클 훅이다.
- created
data, computed, methods, watch 등과 같은 옵션 설정이 완료된 시점이기 때문에, data 등을 사용할 수 있다. 하지만 아직 DOM에 컴포넌트가 마운트 되지 않았기 때문에 $el은 사용할 수 없다.

② Mounting: DOM 삽입 단계
초기 렌더링 직전에 컴포넌트에 직접 접근, 서버 사이드 렌더링에서는 지원하지 않는다.
- beforeMount
컴포넌트 초기에 data가 세팅되어야 한다면 created 라이프 사이클 훅을, 렌더링 되고 DOM을 변경해야 한다면 mounted 라이프 사이클 훅을 사용하면 되기 때문에, 거의 사용하지 않는 라이프 사이클 훅이다.
- mounted
컴포넌트가 DOM에 추가 된 후 호출되는 라이프 사이클 훅이다. 서버 사이드 렌더링은 지원하지 않는다.

$el을 사용하여 DOM에 접근 할 수 있다. mounted 훅이 호출되었다고 모든 컴포넌트가 마운트 되었다고 보장할 수는 없다.

전체가 렌더링 보장된 상태에서 작업을 하기 위해서는 $nextTick을 사용해야 한다.
부모와 자식 관계의 컴포넌트에서 우리가 생각한 순서로 mounted가 발생하지 않는다는 점이다. 즉 부모의 mounted훅이 자식의 mounted훅보다 먼저 실행되지 않는다. 오히려 그 반대이다.

③ Updating: Diff 및 재렌더링 단계
컴포넌트에서 사용되는 반응형 속성들이 변경되거나 어떤 이유로 재 렌더링이 발생되면 실행, 서버 렌더링에서는 호출되지 않는다.
- beforeUpdate
업데이트 된 값들을 가지고 있는 상태이기 때문에, 업데이트 된 값으로 다른 값들을 업데이트 할 수 있다. 이 훅에서 값이 변경되더라도 다시 beforeUpdate 훅이 호출 되지 않기 때문에, 무한 루프에 빠질 걱정은 하지 않아도 된다.
- updated
DOM이 업데이트 된 후 호출 되는 훅이기 때문에 변경 된 후의 DOM을 이용해야 하는 처리를 할 때 사용하기 유용한 훅이다. mounted 훅과 마찬가지로 재 렌더링이 끝났다는 것이 보장된 상태에서 작업하기 위해서는 $nextTick을 사용해야 한다. beforeUpdate 훅과 다르게 updated 훅에서 data를 수정하게 되면 update 훅이 호출 되기 때문에 무한 루프에 빠질 수 있으니 유의해야 한다.

④ Destroy: 컴포넌트 제거 시 실행
- beforeDestroy
컴포넌트가 제거 되기 직전에 호출되는 라이프 사이클 훅이다. 이 훅에서 컴포넌트는 본래의 기능들을 가지고 있는 온전한 상태이다. 이 훅에서 이벤트 리스너를 해제하거나 컴포넌트에서 동작으로 할당 받은 자원들은 해제해야 할 때 사용하기 적합한 훅이다. 서버 사이드 렌더링을 지원하지 않는다.
- destroyed
컴포넌트가 제거 된 후 호출되는 라이프 사이클 훅이다. 컴포넌트의 모든 이벤트 리스너(@click, @change 등..)와 디렉티브(v-model, v-show 등..)의 바인딩이 해제 되고, 하위 컴포넌트도 모두 제거된다. 서버 사이드 렌더링을 지원하지 않는다.

 

라이프사이클 훅	설명
beforeCreate	Vue 인스턴스가 생성되고 가장 처음으로 실행되는 단계 인스턴스의 data 와 methods 속성과 화면 요소가 정의되어 있지 않아 접근할 수 없음
created	Vue 인스턴스가 생성되었고 data 와 methods 속성이 정의되어 두 속성 값이 접근 가능 화면 요소에 인스턴스가 연결되기 전으로 template 속성에 정의된 돔에는 접근할 수 없음
beforeMount	template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소에 인스턴스를 부착하기 직전에 호출
mounted	el 속성에서 지정한 화면 요소에 인스턴스가 연결된 후 호출 template 속성에 정의된 돔에 접근하여 화면 요소 제어 가능
beforeUpdate	인스턴스 속성이 화면에 연결되고 관찰하는 데이터가 변경되었을 때 화면에 반영되기 전에 호출
updated	데이터가 변경되고 나서 화면 요소 제어 가능
beforeDestroy	Vue 인스턴스가 없어지기 직전에 호출
destroyed	Vue 인스턴스가 없어지고 난 후 호출

 

참고자료 및 출처 🙇‍♂️

https://v3.ko.vuejs.org/guide/composition-api-lifecycle-hooks.html

https://hyeooona825.tistory.com/40