[Vue.js] 생명주기 정리
July 22, 2020
🌟Vue Life cycle
🎯인스턴스 생명주기란?
인스턴스 상태에 따라 호출할 수 있는 속성들을 의미합니다. 비동기 통신을 처리할 때 유용히 사용되는 개념입니다.
🎯Vue.js의 라이프사이클
Vue.js 는 크게 4가지의 라이프사이클로 나뉩니다.
🎯creation
가장 먼저 실행되는 훅을 포함합니다. 서버를 렌더링할때, 즉 전반적인 프로젝트 랜더링 시점에도 사용할 수 있습니다. 따라서 프로젝트가 시작되기 전에 처리해야 할 훅을 여기에 포함시키면 됩니다.
- beforecreate 가장 먼저 실행되는 훅입니다. 데이터와 이벤트 생성 전이니 접근이 불가하므로, 이를 사용하지 않는 테스크를 실행해야 합니다.(data,event 사용 불가)
- Created 데이터와 이벤트를 초기화 한 뒤에 실행되는 훅입니다. 따라서 데이터와 이벤트에 접근할 수 있습니다. 하지만 아직 템플릿과 DOM은 렌더링되지 않은 상태입니다.(el 사용 불가)
🎯Mounting
돔을 삽입하는 단계입니다. 템플릿을 읽어와서 해당 값을 랜더링 하기 직전에 컴포넌트에 접근하는 훅을 포함합니다.
- beforeMount 첫 렌더링 직전에 실행되는 훅입니다. 서버사이드 랜더링은 서버에서 내려온 돔과 데이터를 마운트하는 것을 의미합니다. 이때 서버에서 실행된 정보와 클라이언트에서 실행된 정보가 다르면 오류가 발생하므로 데이터를 초기화할땐 이 훅에서 말고 created 훅에서 하는 것이 좋습니다.
- Mounted 랜더링 된 컴포넌트와 템플릿. 돔에 접근할 수 있는 훅입니다. el을 사용할 수 있는 첫 구간이며 자식 컴포넌트부터 실행됩니다.
🎯Updating
재렌더링이 이루어지는 단계입니다. 컴포넌트에서 사용하는 데이터나 타 속성들이 업데이트 되면 실행되는 훅들을 포함합니다.
- beforeupdate 컴포넌트 데이터가 업데이트 되어 돔이 재렌더링되기 직전에 실행되는 훅입니다.
- updated 재렌더링이 일어난 후에 실행되는 훅입니다. 돔이 재랜더링된 후에 접근하므로 돔과 관련된 연산은 할 수 없습니다.
🎯Destruction
Vue 인스턴스를 메모리에서 해제하는 단계입니다. 서버렌더링 시 호출되지 않으며 컴포넌트에 걸린 이벤트와 뷰 인스턴스를 제거하는 훅을 포함합니다.
- beforedestroy Vue 인스턴스 제거 직전에 호출되는 훅입니다. 이벤트 리스너를 제거할 때 사용합니다.
- destroyed Vue 인스턴스 제거 후에 호출되는 훅입니다. Vue의 모든 데이터와 이벤트, 디렉티브를 제거하고 인스턴스 자체도 삭제합니다.
