[Vue] Vue의 LifeCycle

- created, monted, updated, destroyed

- 모든 라이프사이클 훅은 Vue 인스턴스를 가리키며 호출됨

 

1. 가장 먼저 new Vue()를 호출하게 된다.

2. Events와 LifeCycle을 초기화한다.

2-1. beforeCreate 훅 함수 호출

3. Injections와 reactivity를 초기화한다.

3-1. created 훅 함수 호출 

4. el 만들기, el을 template화 하기

4-1. beforeMount 훅 함수 호출

5. Create vm.$el, el을 대체한다.

5-1. mounted 훅 함수 호출

 

mounted가 되면 vue가 눈 앞에 보일거고 상태가 변경됨에 따라 자동으로 vue를 변경시킨다.

 

- 상태변경 시 로직

 

1. 데이터가 변경됨

1-1. beforeUpdate 훅 함수 호출

2. VDOM이 re-render되고 데이터 patch함

2-1. updated 훅 함수 호출

 

참고: https://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