Vue Life Cycle(생명 주기)

Creation / Mounting / Updating / Destruction의 단계를 거침

export default {
    name: 'life',
    // ============== Creation ============== 
    beforeCreate(){
        console.log("Start beforeCreate")
    },
    created(){
        console.log("Start create")
    },
    // ============== Mounting ============== 
    beforeMount(){
        console.log("Start beforeMount")
    },
    mounted(){
        console.log("Start mounted")
    },
    // ============== Updating ============== 
    beforeUpdate(){
        console.log("Start beforeUpdated")
    },
    updated(){
        console.log("Start updated")
    },
    // ============== Destrucion ============== 
    beforeDestroy(){
        console.log("Start beforeDestroy")
    },  
    destroyed(){
        console.log("Start destroyed")
    }   
}

Creation

컴포넌트들을 초기화하는 단계이며 라이프 사이클 중 가장 처음 실행됨

• 서버렌더링에서 지원함
• 클라이언트나 서버 렌더에서 처리해야 할 일이 있으면 이 단계에서 진행
• 컴포넌트들이 dom에 추가되기 전이라 DOM에 접근이 불가함

Mounting

초기 렌더링 직전에 컴포넌트에 직접 접근이 가능함

• 서버렌더링에서 지원안함
• DOM을 변경하고 싶을 때 활용 가능

Updating

컴포넌트에서 사용되는 반응형 속성들이 변경되거나 재렌더링 발생 시 실행됨.

• 주로 디버깅 할때 컴포넌트 재 랜더링 시점을 알고 싶을 때 사용함

Destruction

해체 단계에 돌입함.

• beforeDestroy : 해체 되기 직전에 호출됨
• destroyed : 해체 된 후에 호출됨