본문 바로가기

Vue.js

(2)
Vue3 Composition API에 대해 알아보기 Vue2와 Vue3의 가장 큰 차이점은 Composition API가 추가되었다는 것입니다. Composition API는 기존의 Options API의 단점들을 보완하였으며, Vue 컴포넌트를 작성하는 방식을 완전히 뒤바꾸었습니다. 오늘은 Composition API에 대해 알아보겠습니다.Composition API란?Composition API는 Vue 컴포넌트 작성시 사용하는 여러 API들의 모음입니다. Composition API는 크게 3가지로 나눌 수 있습니다.Reactivity API: 기존 Options API의 data, computed, watch에 해당하는 상태들을 생성하도록 도와주는 APILifecycle Hooks: 기존 Options API의 mounted, destroyed 등..
Vue.js Lifecycle Hook 정리 (해당 문서는 Vue.js 2 기준입니다.) LifeCycle이란? Vue.js 인스턴스가 생성되고 파괴될때까지의 흐름을 lifecycle(생명주기)이라고 합니다. Vue.js에서는 lifecycle 각 단계마다 hook을 제공하는데 해당 hook을 통해 그 단계에서 실행하고자 하는 작업을 할 수 있습니다. 예를 들어 페이지 진입시 해당 페이지에서 필요한 데이터를 api 호출을 통해 가져와야 한다면 created hook을 통해 할 수 있습니다. 다음으로 몇가지 lifecycle hook을 설명드리겠습니다. created 인스턴스가 생성되고 초기화되자마자 실행됩니다. DOM 요소가 인스턴스와 연결된 상태가 아니기 때문에 $el 프로퍼티와 DOM API 사용해서 DOM 요소를 반환받을 수 없습니다. 데이터..