본문으로 바로가기

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

category Helloworld!/Vue.js 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 인스턴스의 모든 디렉티브의 바인딩이 해제되고, 이벤트 연결도 모두 제거 됨.







댓글을 달아 주세요