Vue 라이프사이클

Vue 라이프사이클이란 Vue 인스턴스가 생성된 후 화면에 보여지고 사라지기까지의 단계

​

- 종류

1. beforeCreate

2. created

3. beforeMount

4. mounted

5. beforeUpdate

6. updated

7. beforeDestroy

8. destroyed

​

* beforeCreate

: 가장먼저 실행되는 beforeCreate, Vue 인스턴스가 초기화 된 직후에 발생한다.

: 컴포넌트가 DOM에 추가되기도 전이어서 this.$el에 접근할 수 없다.

: data, event, watcher에도 접근하기 전이라 data(), method: {} 에도 접근할 수 없다.

​

ex)

<template>

</template>

<script>

default export {

data() {

return {

msg: 'obo'

}

},

beforeCreate() {

console.log(msg); //undefined

}

}

</script>

​

* created

: data를 반응형으로 추적가능, computed, methods, watch 등이 활성화되어 접근이 가능하게 됩니다.

: 아직 DOM에는 추가되지 않은 상태

: data에 직접 접근이 가능하기 때문에, 컴포넌트 초기에 외부에서 받아온 값들로 data를 세팅해야 하거나 이벤트 리스너를 선언해야 한다면 이 단게에서 하는것이 가장 적절하다.

​

ex)

created() {

​

}

​

* beforeMount

: DOM에 부착하기 직전에 호출되는 beforeMount, 가상 DOM이 생성되어 있으나 실제로 DOM에 부착되지 않은 상태

​

ex)

beforeMount(){

​

}

​

* mounted

: 일반적으로 가장 많이 사용하는 mouted 훅, 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행되므로, this.$el을 비롯한 data, computed, methods, watch 등 모든 요소에 접근이 가능합니다.

​

ex)

mounted() {}

​

부모와 자식 컴포넌트 간의 mounted 훅 순서는 위 그림과 같습니다.

부모 컴포넌트의 mounted 훅은 자식 컴포넌트의 mounted 훅 이후에 발생한다.

​

하지만 자식컴포넌트가 서버에서 비동기로 데이터를 받아오는 경우처럼 부모의 mounted훅이 모든 자식 컴포넌트가 마운트 된 상태를 보장하지 않는다. 따라서 이때는 this.$nextTick 을 이용한다면, 모든 화면이 렌더링 된 이후에 실행되므로 마운트 상태를 보장할수 있습니다.

​

* beforeUpdate

: 컴포넌트에서 사용되는 data의 값이 변해서, DOM에도 그 변화를 적용시켜야 할때가 있습니다. 이때 변화 직전에 호출되는 것이 바로 beforeUpdate 훅입니다.

​

​

* updated

: 가상 DOM을 렌더링 하고 실제 DOM이 변경된 이후에 호출되는 updated 훅

: 변경된 data가 DOM에도 적용된 상태, 만약 변경된 값들을 DOM을 이용해 접근하고 싶다면 사용

: this.$nextTick 사용 가능

​

* beforeDestroy

: 해당 인스턴스가 해체되기 직전에 beforeDestroy 훅이 호출된다.

​

* destroyed

: 인스턴스 해체 후 호출

​

​

​