[Vue3] Composition API(2)

1. LifeCycle Hook

Vue Lifecycle

상기 이미지는 vue의 LifeCycle입니다. 기존의 Vue2에서 사용했던 LifeCylcle Hook의 사용법 또한 약간 차이점이 있습니다. 앞선 게시글에서 말씀드렸듯이, created대신 setup함수로 대체되었다는 부분 외에는 거의 비슷하지만 호출 방식의 경우 setup 함수 내에서는 composition api 방식으로 호출 할 수 도 있고, setup함수 외부에서는 기존의 option api 방식으로 LifeCycle Hook을 사용할 수 있습니다.

import { onMounted, ref, reative } from 'vue'

export default {
  setup() {
    const _ref = ref(3);
    const _reactive = reactive({ a: 1})
    
    // onMounted() 훅은 setup 함수 내에서 사용하는 경우에만
    // 마치 외부의 함수를 호출한 것처럼 작성할 수 있습니다.
    //
    // 이렇게 작성된 onMounted() 훅은
    // 컴포넌트가 마운트 된 이후 콜백 함수를 실행하지만
    // `this`를 통해 컴포넌트 인스턴스에 접근할 수 없습니다.
    onMounted(function() {
      // `this`를 통해 컴포넌트 인스턴스에 접근할 수 없습니다.
      console.log('onMounted가 호출 되었습니다:', this)
      console.log('ref:', _ref)
      console.log('reactive:', _reactive)
    })
  },

  // 컴포넌트가 마운트 된 후,
  // 옵션 API 방식의 mounted() 훅을 실행.
  mounted() {
    // `this`를 통해 컴포넌트 인스턴스에 접근할 수 있습니다.
    console.log('mounted()가 호출 되었습니다:', this)
  }
}

해당 예시에서 option api와의 가장 큰 차이점은 setup함수 내의 hook의 경우 this로 컴포넌트 인스턴스에 접근할 수 없다 입니다. setup함수 내에서 컴포넌트 인스턴스의 전달될 메서드, 반응형 변수에 직접 접근 하는 것으로 원하는 동작을 구현 할 수 있습니다.

 

참고 사이트
https://v3-docs.vuejs-korea.org/guide/essentials/lifecycle.html#registering-lifecycle-hooks