Lifecycle API 사용하기, mounted

 

인스턴스 라이프사이클이란 뷰의 인스턴스가 생성되어 소멸되기까지 거치는 과정을 의미합니다. 인스턴스가 생성되고 나면 라이브러리 내부적으로 다음과 같은 과정이 진행됩니다.

• data 속성의 초기화 및 관찰 (Reactivity 주입)
• 뷰 템플릿 코드 컴파일 (Virtual DOM -> DOM 변환)
• 인스턴스를 DOM에 부착

https://joshua1988.github.io/vue-camp/vue/life-cycle.html#%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%91%E1%85%B3%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8F%E1%85%B3%E1%86%AF-%E1%84%83%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%A5%E1%84%80%E1%85%B3%E1%84%85%E1%85%A2%E1%86%B7

 

인스턴스 라이프사이클 훅: 컴포넌트 생명 주기에 따라 특정 로직을 실행할 수 있는 속성 함수. created, beforeMount() 등, 옵션API에서 사용하던 것

 

라이프사이클 API: 컴포지션 스타일로 작성된 인스턴스 라이프사이클 훅

 

https://joshua1988.github.io/vue-camp/composition/lifecycle.html#%E1%84%8B%E1%85%B5%E1%86%AB%E1%84%89%E1%85%B3%E1%84%90%E1%85%A5%E1%86%AB%E1%84%89%E1%85%B3-%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%91%E1%85%B3%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8F%E1%85%B3%E1%86%AF-%E1%84%92%E1%85%AE%E1%86%A8%E1%84%80%E1%85%AA-lifecycle-api%E1%84%8B%E1%85%B4-%E1%84%8E%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%A5%E1%86%B7

Lifecycle API 🆕 | Cracking Vue.js

 

 

setup(){
    //라이프 사이클 api가 적용된 구간
    //todoItems.value = fetchTodos();

    console.log('setup called');

    //화면이 그려지기 전에 동작
    onBeforeMount(() =>{
      console.log('onBeforeMount called');
      todoItems.value = fetchTodos();
    })
}

순서상 setup called 이후 onBeforeMount called가 발생하게 된다.

 

onUnMounted는 컴포넌트가 사라졌을 때라는데.. 다른 화면으로 갈 때 일어나는 거랑 비슷할까?