[Vue 공식 문서 뽀시기-3] Vue 라이프 사이클

프로그래머스 데브코스 - Vue

시작하기 | Vue.js

 

라이플 사이클

 

각 Vue Component는 일련의 초기화 단계를 거쳐 화면에 그려집니다. 그리고 DOM 업데이트 시에도 몇 단계를 거쳐 진행됩니다.

이러한 일련의 과정을 통틀어 라이플 사이클이라고 하며 아래 그림과 같습니다.

 

Vue는 라이프 사이클마다 각 단계에 해당하는 특별한 함수를 실행하여, 사용자가 특정 단게에서 자신의 코드를 제어할 수 있는 기회를 제공합니다. 

-> 이것이 바로 라이프 사이클 훅! 입니다.

 

라이프 사이클 훅에는 created, mounted, updated, unmounted 등이 있으며

모든 라이프 사이클 훅 함수에서는 Vue 인스턴스를 가리키는 this를 사용할 수 있습니다.

Vue.createApp({
	data() {
    	return { count: 1 }
    },
    created() {
    	// `this`는 Vue 인스턴스를 가리킵니다.
        console.log('count is: ' + this.count) // count is: 1
    }
})

🔥 Vue 인스턴스 내 option이나 call back 내에서는 this를 사용할 수 있습니다. 따라서 option 또는 call back을 화살표 함수로 선언해서는 안됩니다.

이름	설명
beforeCreate	Vue 인스턴스가 초기화된 직후에 호출 data, watcher, event 리스너를 초기화 하기 전이므로 접근할 수 없습니다.
created	methods, computed, watch에 접근하여 사용할 수 있습니다. 주로 부모 또는 외부로부터 받아온 데이터를 가공하거나 event 리스너를 선언할 때 사용합니다.
beforeMount	DOM에 마운트하기 전에 호출
mounted	DOM과 Vue 인스턴스가 마운트된 상태 * 부모 / 자식 Component의 mount 순서
beforeUpdate	데이터의 값이 변경되었을 때 이를 DOM에 반영하기 위한 단계에서 DOM 변경 직전에 호출
updated	변경된 값에 의해 virtual DOM이 리렌더링된 이후에 호출 * 만약 updated에서 데이터를 변경하게 되면 다시 update 과정을 실행하게 되어 무한루프에 빠질 수 있음에 유의하자!
beforeUnmount	unmount가 호출되어 Vue 인스턴스 해제되기 전에 호출 리소스와 event 리스너들을 해체시켜줄 때 사용됩니다.
unmounted	Vue 인스턴스가 해제된 이후에 호출 자식 Component들도 모두 제거된 상태입니다.

 

+ Vue 2.0 에서의 라이프 사이클

Vue3 버전이 나온지 꽤 되었지만 Vue 2 버전도 많이 사용되기 때문에 Vue 2에서의 라이프 사이클도 보겠습니다.

 

Vue2에서는 beforeDestroy / destroyed가 호출되었다면 Vue3에서는 beforeUnMount / mounted로 변경된 점에 유의하자!

호출되는 시점은 크게 달라진 점이 없습니다.🤨