2) Mounting : DOM 삽입 단계
mounting hooks는 가장 많이 사용되며,초기 렌더링 전후에 즉시 컴포넌트에 액세스 할 수 있다. 그러나 서버 측 렌더링이 실행되는 동안에는 실행되지 않는다.
초기 렌더링 직전이나 직후에 DOM에 접근하거나 수정해야 하는 경우 사용한다.
초기화시 컴포넌트에 필요한 데이터를 가져와야 하는 경우 mounting 훅을 사용하지 말고, 특히 서버 측 렌더링 동안에 필요한 데이터가 있을 경우 created 훅을 사용하는 것이 낫다.
- beforeMount
템플릿 및 render 함수가 컴파일된 후, 초기 렌더링이 일어나기 직전에 실행된다.
- mounted
컴포넌트, 템플릿, 렌더링된 DOM에 접근할 수 있고 DOM을 수정하기위해 사용된다.
3) Updating : Diff 및 Re-rendering 단계
컴포넌트에서 사용하는 반응형 속성들이 변경되거나 리렌더링될 때마다 호출된다.
디버깅이나 프로파일링을 위해 컴포넌트가 다시 렌더링되는 시기를 알아야 하는 경우 사용한다.
* 컴포넌트의 반응형 속성들이 언제 변경되는지 알아야 하는 경우에는 computed나 watch를 사용한다.
- beforeUpdate
컴포넌트 데이터가 변경되고 업데이트 주기가 시작된 후 DOM이 패치되고 다시 렌더링되기 직전에 실행된다.
컴포넌트가 렌더링되기 전에 반응형 데이터의 신규 상태를 가져와야하는 경우 사용한다.
사용 예시)
<template>
<div ref="example-element">{{counter}}</div>
</template>
<script>
export default {
data() {
return {
counter: 0
}
},
created() {
setInterval(() => { this.counter++ }, 1000) },
beforeUpdate() {
console.log(`At this point, Virtual DOM has not rerendered or patched yet.`)
console.log(this.counter)
}
}
</script>- updated
컴포넌트 데이터가 변경되어 DOM이 리렌더링 된 후 실행된다.
property가 변경된후 DOM에 접근해야할 때 사용한다.
4) Destruction : 해체 단계
컴포넌트가 해체되고 DOM에서 제거될 때 실행된다.
- beforeDestroy
해체 직전에 실행되며 컴포넌트는 여전히 완전하게 존재하고 작동한다.
이벤트 리스너나 reactive subscriptions를 정리하는데에 사용된다.
- destroyed
컴포넌트가 해체된 후 호출된다.
컴포넌트가 파괴된 것을 원격 서버에 알려야 하는 경우 사용한다.
5) 그 외 hooks
activated : keep-alive 컴포넌트가 활성화될 때 호출된다.
deactivated : keep-alive 컴포넌트가 비활성화될 때 호출된다.
첫댓글 Vue도 공부를 시작하셨군요...
늘 새로운것의 탐구가 보기 좋습니다.
계속되는 업그레이드되는 지식들~~ 기대 됩니다.
Vue.js 메뉴 만들어서 그쪽(왼쪽 메뉴판의 '특별학습' -> 'Vue.js')으로 옮겨두었습니다. 계속 공부하게되면 하나씩 더 채워보세요..
넵 알겠습니다~~