생명주기는 DOM노드 트리에 마운트, 불필요한 엘리먼트 제거하는 과정
각 생명주기를 후킹할 수 있는 방법을 제공하는데 Options API를 사용하면 지정된 옵션 함수를 정의해서 후킹할 수 있다.
💚beforeCreate
컴포넌트를 생성하기 전에 호출되며 컴포지션 API의 setup함수는 beforeCreate를 대체한다. 생성한 data, data를 관찰할 수 있는 watch같은 함수들은 동작하지 않는다. 그러므로 setup함수에서는 beforeCreate가 따로 없다.
💚created
컴포넌트가 생성되면 호출된다. 컴포지션API의 setup함수는 이 함수도 대체한다.
컴포넌트의 옵션에 접근이 가능해서 data 옵션에 선언한 데이터들을 초기화할 때 많이 사용함.
💚mounted(onMounted)
컴포넌트의 구성요소들이 DOM엘리먼트로 마운트된 뒤 호출됨 이 때부터 실제 엘리먼트를 참조할 수 있다. 마운트 사이클 이전까지는 초기화한 값으로만 들어있고, 이 시기부터 해당 변수를 통해서 실제 엘리먼트를 접근할 수 있게되는 것이다.
💚beforeUpdate(onBeforeUpdated)
데이터가 변경됐지만 아직 DOM에 반영되지 않았을 때 호출됨 실제 엘리먼트를 참조하는 변수로부터 아무것도 얻을 수 없다.
💚updated(onUpdated)
데이터가 변경돼서 DOM이 변경완료된 시점에 호출됨. 해당 DOM에 참조된 변수를 이용해서 수행 가능한데 엘리먼트의 자식노드들도 완료됐다고 보장하진 않음. 현재 컴포넌트만 수정된 것임
nextTick을 이용해서 자식 업데이트도 완료됐음을 기다려야한다
updated() {
this.$nextTick(function() {
//자식들이 업데이트 됐음다
})
}
💚beforeUnmount(onBeforeUnmount)
컴포넌트가 탈착되기 직전에 호출됨. 컴포넌트가 Unmount되기 전에 해줘야할 것들을 하면 된다.
💚unmounted(onUnmounted)
컴포넌트가 탈착되고 나서 호출되며 모든 디렉티브와 이벤트가 사용 불가능해진다.
💚activated(onActivated)
keep-alive태그는 컴포넌트가 다시 렌더링되는 것을 방지, 상태를 유지하기 위해 쓰인다. 일반적으로 v-is 디렉티브와 함께 쓰이며 v-is 디렉티브가 컴포넌트를 변경할 때 기존 컴포넌트의 상태가 사라지지 않게 하기위해 사용된다. keep-alive태그로 컴포넌트 상태가 보존되기 시작하면 onActivated 훅함수가 호출된다
💚deactivated(onDeactivated)
keep-alive 컴포넌트가 상실되면 호출.
💚renderTracked(onRenderTracked)
버츄얼 돔이 변경될 때마다 관찰을 목적으로 해당 훅이 호출됨.
💚renderTriggered(onRenderTriggered)
버츄얼 돔이 돔으로 반영될 때 호출됨. onMounted, onActivated, onUpdated와 같이 변경되기 직전에 호출된다.
💚errorCaptured(onErrorCaptured)
자식 컴포넌트에서 에러가 발생하면 어느 컴포넌트에서 어떤 에러가 발생했는지 알려준다.
