Vue 라이프 사이클

 Component의 생애주기 

 

 

 

Vue Instance Life Cycle(생애주기)

: 인스턴스의 상태에 따라 호출할 수 있는 속성을 말한다. 뷰의 라이프사이클은 크게 4단계로 구분되는데 [ 뷰의 인스턴스 생성 - 인스턴스를 화면에 부착 - 인스턴스 내용 갱신 - 인스턴스 소멸 ] 로 구성되어 있으며, 라이프사이클과 관련하여 8개의 속성이 존재한다.

 

 

---

 

 

 Creation(컴포넌트 초기화 / 뷰의 인스턴스 생성) 

 

 

훅(hook)을 실행한다면 라이프사이클 중 Creation에서 가장 처음 실행된다. 컴포넌트가 DOM에 추가되기 전달계며, 서버렌더링 훅도 지원된다. 아직 컴포넌트가 돔에 추가되기 전이기 때문에 돔에 접근하거나 this.$el를 사용할 수 없다. 사용되는 속성은 두가지가 존재하는데 beforeCreate와 Created가 있다.

 

• BeforeCreate : 이벤트 및 라이프 사이클을 초기화한다. 모든 속성 중에서 가장 먼저 실행되며, data와 events가 인스턴스에 적용되지 않은 시점이라 DOM 등에 접근이 불가능하다.

• Created : beforeCreate 라이프 사이클 단계 다음에 실행되며 화면에 반응성을 주입한다. 앞 속성과 다르게 data와 events가 활성화 되어 있는 시점으로 접근은 가능하지만 인스턴스가 화면에 부착되기 전이기 때문에 template에 정의된 DOM 요소로는 접근이 불가능하다.

 

 

---

 

 Mounting (DOM 삽입 단계 / 초기 랜더링 직전) 

 

 

초기 렌더링 직전에 컴포넌트에 직접 접근할 수 있으며, 서버렌더링에서는 지원하지 않는다.

 

• BeforeMount : created 단계 이후 template 속성에 지정한 마크업 속성을 render()함수로 변환한 후, el 속성에 지정한 화면 요소에 인스턴스를 부착하기 전에 호출되는 시점이다. 쉽게 풀어쓰면 template과 render 함수들이 컴파일 된 후 첫 랜더링이 일어나기 직전이라는 것이다.

• Mounted : component, template, 랜더링된 인스턴스가 화면에 부착되고 난 다음의 호출되는 시점이다. template 속성에 정의한 화면요소에 접근할 수 있어서 화면 요소를 제어하는 로직을 작성하기 좋다. 다만, DOM에 인스턴스가 부착되자마자 호출되기 때문에 하위컴포넌트나 외부라이브러리에 의해 추가된 최종화면의 코드 변환시점이 다를 수 있다.

 

---

 

 

Updating ( 인스턴스 내용 갱신) 

 

 

컴포넌트에 사용되는 반응형 속성들이 변경되거나, 다른 이유로 랜더링이 재발생되면 실행된다. 서버랜더링에서는 호출되지 않으며, 디버깅이나 프로파일링등을 사용하고 싶을 때 좋은 단계이다.

 

• BeforeUpdate : 컴포넌트의 데이터가 변하여 업데이트 사이클이 시작될 때 실행된다. 돔이 재랜더링되고 패치되기 직전의 시점이다. 인스턴스에 정의한 속성들이 화면에 치환되고, 치환된 값은 뷰의 반응성 제공을 위해 $watch속성으로 감시한다(데이터관찰). 변경예정인 새로운 데이터에 접근할 수 있으며, 변경 예정 데이터와 로직을 미리 넣을 수는 있지만, 화면에 다시 랜더되진 않는다.

• Updated : 데이터가 변경되고 난 후, 가상 DOM으로 다시 랜더된 후 실행된다. 데이터 변경으로 인한 화면 요소까지 변경완료된 시점이기 때문에 데이터 변경 후 화면 요소 제어 관련 로직을 추가 할 수 있다. 해당 단계에서 데이터를 변경하면 무한루프에 빠질 수 있으니 주의하자!

 

---

 

 Destruction(인스턴스 소멸 전 / 해체시점) 

 

 

• BeforeDestroy : 인스턴스가 파괴되기 직전에 호출되며, 인스턴스에 접근이 가능하다. 컴포넌트는 원래 모습과 모든기능들을 그대로 가지고 있다. 인스턴스의 데이터를 삭제하기 좋은 단계이며, 서버 랜더링 시 호출되지 않는다.

• Destroyed : 인스턴스가 제거된 후 호출된다. 뷰 인스턴스에 정의된 모든 속성을 제거하고, 하위에 선언한 인스턴스 또한 모두 파괴한다. 서버 랜더링 시 호출되지 않는다.

 

 

 

 

 

 

참고문서 : aomee0880.tistory.com/185

vue.js의 created와 mounted의 차이 + Vue의 라이프 사이클

참고문서 : kr.vuejs.org/v2/guide/instance.html#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%ED%9B%85

Vue 인스턴스 — Vue.js

참고문서 : hyeooona825.tistory.com/40

[vue.js] vue 인스턴스 생명주기 (life cycle)