Vue.js 3.0 개발가이드 정리(2)

03.LifeCycle Hooks (생명주기 훅)

:컴포넌트가 생성되고 소멸되기까지의 단계, 각 단계에서 실행되는 함수들을 라이프사이클 훅이라 부른다.

 

1) 컴포넌트 생성: vue컴포넌트 생성될때 초기화 과정을 거친다. 
2) Created: 템플릿 및 Virtual DOM이 마운팅 혹은 랜더링 되기 전에 실행, 데이터와 이벤트가 활성화되어 접근할 수 있다.
3) Mounted: 컴포넌트가 초기 랜더링 및 DOM 노드 생성이 완료된 후, 코드를 실행하는데 사용할 수 있다.
4) Updated: 컴포넌트 데이터가 변경되어 DOM이 렌더링된 후 실행된다. 또한, Property가 변경된 후 DOM에 접근해야할 때 사용한다.

1. Renderer에게 컴포넌트 처리해달라고 요청
2. Renderer에게 컴포넌트 처리해달라고 요청받음 
3. 해당 컴포넌트 불러옴
4. 컴포넌트 생성전에 접근할 수 있는 부분 beforeCreate
5. 옵션 API 초기화(Options API경우)
6. created 훅
 - beforeCreate, created 는 Composition API에서는 setup이라는 키워드로 그 기능을 대체하고 있다.