[Vue.js] 라이프사이클

vue.js 인스턴스 라이프사이클 훅

new Vue 를 생성할때 라이프사이클이 돌기 시작

 

참고 : kr.vuejs.org/

Vue.js

 

라이프사이클 훅 이벤트 순서

1. beforeCreate : 반응성 및 기본 Vue에서 필요한 기능들이 생성되기 전

2. created : 반응성 및 기본 Vue에서 필요한 기능들이 생성되고난 후

3. beforeMount : DOM 연결 전

4. mountd : DOM 연결 후 (html 요소를 제어하기 위해서는 mounted 사용)

5. beforeUpdate : 데이터가 변경되기 전 (화면을 다시 그리기 전)

6. updated : 데이터가 변경되고난 후 (화면을 다시 그리고난 후)

7. beforeDestroy : Vue 인스턴스 해제 전

8. destroyed : Vue 인스턴스 해제 후 (이벤트 연결 해제 및 자식 컴포넌트 연결 해제)

 

 

사용 예

new Vue({
	data: {
		a: 1    
    },
    created () {
    	//this 는 vm 인스턴스(data 값)을 가리킴
    	return this.a
    }
})