Single File Component
: Vue의 컴포넌트를 하나의 파일로 나타내는 것을 의미
- template: 컴포넌트가 렌더링되어야 하는 HTML 코드 부분
- script: 템플릿에서 사용한 반응성을 가지는 변수 등을 조작 / 자바스크립트나 타입스크립트 등을 이용해 스크립트 코드 작성
- style: 컴포넌트 혹은 전체 프로젝트에서 사용할 CSS 코드 삽입 가능
cf/ scoped라는 속성을 이용하면 CSS가 컴포넌트에만 적용, scoped라는 속성을 제외하면 전체 프로젝트에 적용 / 일반적으로는 속성을 항상 같이 사용
컴포지션 함수 setup
: setup 함수를 구성하는 내용은 자바스크립트를 작성하듯이 스크립트로 작성
setup() {
const data = 1
return { data }
}
Vue 컴포넌트의 생명주기
: 컴포넌트를 생성하여 DOM 노드 트리에 마운트하고, 불필요한 엘리먼트를 제거하는 일련의 과정
- beforeCreate: 컴포넌트를 생성하기 전에 호출
- created: 컴포넌트가 생성되면 호출
- beforeMount(onBeforeMount): Vue의 가상 노드가 render 함수를 호출하기 직전에 호출
- mounted(onMounted): 컴포넌트의 구성요소들이 DOM 엘리먼트로 마운트된 후 호출, 이 순간부터 실제 엘리먼트를 참조할 수 있음
- beforeUpdate(onBeforeUpdated): 데이터가 변경되었지만 아직 DOM에 반영되지 않았을 때 호출 / 실제 엘리먼트를 참조하는 변수로부터 아무것도 없을 수 없는 상태
- updated(onUpdated): 데이터가 변경되어 DOM이 변경완료된 시점에 호출 / 현재 컴포넌트만 수정이 되었음을 보장 / nextTick을 이용해 모든 자식의 업데이트가 완료되었음을 기다려야 함
- beforeUnmount(onBeforeUnmount): 컴포넌트가 탈착되기 직전에 호출
- unmounted(onUnmounted): 컴포넌트가 탈착되고 나서 호출
- activated(onActivated): 일반적으로 v-is 디렉티브와 함께 쓰여, v-is 디렉티브가 컴포넌트를 변경할 때 기존 컴포넌트의 상태가 사라지지 않게 하기 위해 사용
- deactivated(onDeactivated): keep-alive로 상태가 유지되던 컴포넌트가 효력을 상실하면 호출
- renderTracked(onRenderTracked): Virtual DOM이 변경될 때마다 관찰을 목적으로 해당 생며주기 훅이 호출
- renderTriggered(onRenderTriggered): Virtual DOM이 DOM으로 반영이 되어야 할 때 호출
- errorCaptured(onErrorCaptured): 자손 컴포넌트에 에러가 발생하면 어느 컴포넌트에서 어떤 에러가 발생했는지 알려줌
출처 - 한 권으로 배우는 Vue.js 3 / 영진닷컴