Vue 인스턴스는 객체로 생성되고, 데이터에 대한 watch 기능을 설정하는 등 작업을 위해 초기화를 수행한다. 그리고 이 과정에서 다양한 라이프 사이클 훅 메서드를 적용할 수 있다.
라이프 사이클 훅 | 설명 |
beforeCreate | Vue 인스턴스가 생성되고 데이터에 대한 관찰(whatch) 기능 및 이벤트 감시자 설정 전에 호출 됨 |
create | Vue 인스턴스가 생성된 후에 데이터에 대한 관찰 기능, 계산형(computed) 속성, 메서드, 감시자 설정이 완료된 후에 호출 됨 |
beforeMount | 마운트가 시작되기 전에 호출 됨 |
mounted | el 에 Vue 인스턴스의 데이터가 마운트된 후에 호출 됨 |
beforeUpdate | 가상 DOM이 랜더링, 패치되기 전에 데이터가 변경될 때 호출됨. 이 훅에서 추가적인 상태 변경을 수행할 수 있다. 하지만 추가로 다시 랜더링하지는 않는다. |
update | 데이터의 변경으로 가상 DOM이 다시 렌더링되고 패치된 후에 호출됨. 이 훅이 호출되었을 때는 이미 컴포넌트의 DOM 이 업데이트 된 상태이다. 그래서 DOM에 종속성이 있는 연산을 이 단계에서 수행할 수 있다. |
beforeDestory | Vue 인스턴스가 제거되기 전에 호출됨. |
destory | Vue 인스턴스가 제거된 후에 호출 됨. 이 훅이 호출될 때는 Vue 인스턴스의 모든 디렉티브의 바인딩이 해제되고, 이벤트 연결도 모두 제거 됨. |