1. Created(생성)
beforeCreate
가장 먼저 실행되는 훅으로, vue 인스턴스가 초기화 된 직후에 발생된다. 컴포넌트가 DOM에 추가되기 전이기 때문에 data, methods에 접근이 불가능하다.
created
data를 반응형으로 추적할 수 있게 되며 computed, methods, watch 등이 활성화되어 접근이 가능하다. 컴포넌트 초기에 외부에서 받아온 값들로 data를 셋팅하거나 이벤트 리스너를 선언해야 한다면 이 단계에서 하는 것이 가장 적절하다.
2. Mounted(DOM에 부착)
beforeMount
템플릿과 render 함수들이 컴파일 된 후 첫 렌더링이 일어나기 직전에 실행된다. 가상 DOM이 생성되어 있으나 실제 DOM에 부착된 상태는 아니다. 초기 렌더링 직전에 DOM을 변경하고자 한다면 이 단계를 활용하면 된다.
mounted
가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행된다. data, computed, methods, watch 등 모든 요소에 접근이 가능하다. 부모와 자식 관계에서 컴포넌트를 렌더링 할 때, 자식 컴포넌트의 Mounted가 부모 컴포넌트보다 먼저 실행된다.
3. Update(업데이트)
beforeUpdate
컴포넌트의 데이터가 변하여 업데이트가 시작될 때 실행된다. 정확히는 돔이 재 렌더링되고 패치 되기 직전에 실행된다. 재 렌더링 전의 새 상태의 데이터를 얻을 수 있다.
update
컴포넌트의 데이터가 변하여 재 렌더링이 일어난 후에 실행된다. DOM이 업데이트 완료된 상태이며 연산과 기능을 할 수 있다. 주의할 것은, data를 이 훅에서 변경하면 무한 루프를 일으킬 수 있으므로 이 훅에서는 데이터를 직접 바꾸면 안 된다.
4. Destroy(소멸)
beforeDestroy
인스턴스가 소멸되기 직전에 호출된다. 컴포넌트는 기본 모습과 기능을 그대로 가지고 있으며, 이벤트를 제거하는 등 인스턴스가 사라지기 전에 해야할 일들을 처리하는 데 활용할 수 있다.
destroyed
인스턴스가 소멸된 후에 호출된다. Vue의 인스턴스의 속성에 접근할 수 없으며 모든 하위 Vue 컴포넌트도 삭제된다.
