뷰 라이프사이클(Vue LifeCycle)

• LifeCycle이란?

라이프사이클 = 생명주기

Vue에서 인스턴스가 생성되고 소멸까지의 과정을 라이프사이클이라 한다.

Vue로 개발할 시, 컴포넌트를 많이 사용하는데 라이프사이클을 잘 알아두면 여러모로 활용할 수 있다.

 

• LifeCycle 종류

LifeCycle Diagram

1. 생성(Creation) 단계 - 인스턴스 생성

2. 장착(Mouting) 단계 - 인스턴스를 화면에 표시

3. 수정(Updating) 단계 - 인스턴스 내용 변경

4. 소멸(Destruction) 단계 - 인스턴스 소멸

 

각 단계별로 2가지의 속성이 있다.(총 8가지)

 

• 생성(Creation) 단계 

- beforeCreate

인스턴스가 생성되고 가장 먼저 실행된다.

이 단계에서는 data, method 속성이 정의되지 않았고, DOM에 등록되어 있지 않은 상태이므로 접근할 수 없다.

 

- created

data, method 속성이 정의되어 접근이 가능하다.(this.data 사용가능!)

+ props, methods, computed, watch가 활성화되어 접근 가능한 상태이다.

하지만 DOM에 등록되지 않은 상태이다.

 

•  장착(Mouting) 단계 

- beforeMount 

DOM에 등록되기 직전에 실행된다.

가상 DOM에는 등록되어 있으나, 실제  DOM에는 등록되기 이전의 상태이다.

 

- mounted

가상 DOM의 내용을 실제 DOM에 등록된 이후 실행된다.

$el을 사용하여 실제 DOM에 접근할 수 있다.

 

•  수정(Updating) 단계 

- beforeUpdate

컴포넌트 데이터가 변경되고, 가상 DOM이 재렌더링되기 전에 실행된다.

변경 예정인 데이터에 접근할 수 있다.

 

- updated

가상 DOM이 렌더링되고, 실제 DOM이 변경된 이후에 실행된다.

재렌더링이 완료된 상태이다.

 

•  소멸(Destruction) 단계 

- beforeDestroy

인스턴스가 소멸되기 직전에 실행된다.

소멸되기 직전이므로, 아직 인스턴스에 접근이 가능하다.

 

- destroyed

인스턴스가 소멸된 이후에 호출된다.

모든 속성이 제거되고, 하위에 선언했던 인스턴스들도 모두 소멸된다.

 

•  코드  

var app = new Vue ({
	el: '#app',
    data() {
    	return {
        	msg: 'hello';
        }
    },
    beforeCreate(){
    	console.log("beforeCreate");
    },
    created(){
    	console.log("created");
    },
    beforeMount(){
    	console.log("beforeMount");
    },
    mounted(){
    	console.log("mounted");
    },
    beforeUpdate(){
    	console.log("beforeUpdate");
    },
    updated(){
    	console.log("updated");
    },
    beforeDestroy(){
    	console.log("beforeDestroy");
    },
    destroyed(){
    	console.log("destroyed");
    }
})

위의 코드를 상황에 맞게 바꿔서 사용하면 된다.

 

전체적인 과정을 잘 나타낸 사진이 있길래 첨부함니다 ^_^