Vue.js 2.0 라이프 사이클

Vue.js 2.0 라이프 사이클

Vue 라이프 사이클이란 Vue 인스턴스나 컴포넌트가 생성되고 소멸되기까진의 단계를 말하며 크게

Creation, Mounting, Updating, Destruction 으로 나뉜다.

<script> 
	new Vue({
		// vue instatnce 생성
	});
</script>

 

• Creation돔 이전에 처리되므로 돔에 접근할 수 없다.
  • beforeCreate : 모든 훅 중에 가장 먼저 실행되는 훅
  • Created : data 와 events가 활성화되어 접근 가능하다.
• 컴포넌트가 돔에 추가 되기 이전으로, Creation 단계에서 실행되는 훅이 라이프사이클 중에서 가장 처음 실행된다. 서버 렌더링에서도 지원되는 훅으로 클라이언트 단과 서버 단에서 모두 처리해야할때 처리하는 단계.

 

• Mounting
  • beforeMount
  • mounted : 컴포넌트, 템플릿, 렌더링된 돔에 접근 가능한 단계.
    • Parent, Child mounted의 경우 created 훅은 부모, 자식 순으로 실행되지만 mounted는 child mounted 가 완료된 후에 parent mounted 가 실행되는 순서이다.
• 렌더링 직전에 컴포넌트에 직접 접근할 수 있는 단계. 초기 렌더링 직전에 돔을 변경하고자 한다면 활용 할 수 있으나 컴포넌트 초기 세팅되어야하는 데이터는 created 단계를 사용하는 것이 주이다.

 

• Updating
  • beforeUpdate : 컴포넌트의 데이터가 변하여 업데이트 사이클이 시작될때 실행
  • updated : 컴포넌트의 데이터가 변하여 재 렌더링이 일어난 이후에 실행된다.
• 컴포넌트에서 사용된 반응형 속성들이 변경 또는 재 랜더링 발생 시 실행된다.

 

• Destruction(해체 단계)
  • beforeDestory : 뷰 인스턴스가 제거 되기 직전에 호출된다.
  • destroyed : 뷰 인스턴스 제거가 된 이후에 호출된다.

 

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.