[ Vue.js ] Vue - LifeCycle / 뷰 라이프사이클 알아보기

안녕하세요 상훈입니다.

vue.js 에서도 역시나 모든 언어들이 그러하듯 Life Cycle이 존재합니다.

 

Lifecycle Hooks | Vue.js

 

Vue.js 3 에서 지원하는 LifeCycle Api's 입니다. 

클릭시 해당 링크로 이동

 

코드 먼저 살펴보겠습니다.

 let app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                taskCompleted: false,
            },
            beforeCreate() {    // 1 
                alert('before create')
            },
            created() {         // 2
                alert('created')
            },
            beforeMount() {     // 3
                alert('before mount')
            },
            mounted() {         // 4
                alert('after mounted')
            },
            
        })

1~4 까지의 순서를 표현해보았는데요, 

beforeCreate -> created -> beforeMount -> mounted 순서대로 진행되는 것을 보실 수 있습니다.

 

이렇게 작성한다면, 해당 내용은 

'before create'  ->  'created'  ->  'before mount'  ->  'after mounted'  순서대로 렌더링이 되어 출력됩니다. 
물론 가장 마지막은 app => message 와 taskCompleted 입니다.