본문으로 바로가기

[Vue] Vue 인스턴스 라이프 사이클

category Helloworld!/Vue 2018. 12. 27. 16:41

Vue 인스턴스는 객체로 생성되고, 데이터에 대한 watch 기능을 설정하는 등 작업을 위해 초기화를 수행한다. 그리고 이 과정에서 다양한 라이프 사이클 훅 메서드를 적용할 수 있다.

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