Lifecycle

Vue 인스턴스는 생성될 때 사전에 정의된 일련의 초기화 단계를 거치게 되는데 이를 라이프사이클 이라고 한다.

Vue 인스턴스는 크게 생성되고(create), DOM에 부착되고(mount), 업데이트되며(update), 없어지는(destroy) 4가지 과정을 거친다.

🔵 Lifecycle Hook

각각의 단계에서 Vue는, Vue를 사용하는 사람들이 정의한 로직을 실행하도록 == [훅(Hook)을 할 수 있도록] API를 제공한다. 이를 라이프사이클 훅 이라고 한다.

일반적으로 많이 사용하는 종류로는 created, Mounted, beforeUpdate, Updated, beforDestroy 가 있다.

created

• 반응형이 가능해지는 시점
• data/events에 접근 가능 (computed,methods,watch가 활성화되어 접근 가능)
• DOM에 접근 불가능
• API요청을 통해 Data에 초기값을 설정할 때, 이벤트 리스너 선언할 때 주로 사용 ⭐

var app = new Vue({
    el: '#app',
    data() {
        return {
            msg: 'hello';
        }
    },
    created(function() {
        console.log(this.msg); // hello
    })
})

mounted

• 실제 DOM에 접근이 가능해지는 시점
• computed,methods,watch 뿐만 아니라 this.$el에도 접근 가능!
• API요청을 통해 data에 초기값 설정 + DOM 접근이 필요할 때 주로 사용 ⭐
  
  일반적으로 부모와 자식 컴포넌트 간의 mounted 훅 순서는 위와 같다. 그러나 자식 컴포넌트가 서버에서 비동기로 데이터를 받아오는 경우처럼, 부모의 mounted훅이 모든 자식 컴포넌트가 마운트 된 상태를 보장하지는 않는다. 이때 this.$nextTick을 이용하면 모든 렌더링을 보장할 수 있다.

var app = new Vue({
    el: '#app',
    mounted(function() {
        this.$nextTick(function() {
            // 모든 화면이 렌더링된 후 실행합니다.
        })
    })
})

beforeUpdate

• data 값이 변해서 DOM에도 그 변화를 적용시켜야 할 때, 직전에 호출되는 것
• 디버깅용으로 자주 사용

var app = new Vue({
    el: '#app',
    beforeUpdate(function() {
        console.log('beforeUpdate');
    })
})

updated

• 렌더링 하고 실제 DOM이 변경된 이후에 호출되는 훅
• 디버깅용으로 자주 사용

var app = new Vue({
    el: '#app',
    updated(function() {
        console.log('beforeUpdate');
    })
})

beforeDestroy

• 데이터,이벤트,DOM 등 모든 것이 아직 살아있는 시점
• 더 효율적인 메모리 관리를 위해 이벤트를 제거할 때 활용 가능

var app = new Vue({
    el: '#app',
    beforeDestroy(function() {
        console.log('beforeDestroy');
    })
})

참고블로그