Vue Lifecycle

오늘은 vue.js lifecycle에 대해서 공부했다.
lifecycle에 대해서 잘 모르고 그저 onMounted 만 사용했었는데,
다른 컴포넌트에서 setTimeout 를 실행 시간을 길게하니 다른 컴포넌트에서도 나타나는 오류를 발견하게 되었다.
이러한 오류를 잡기 위해서 lifecycle에대해서 공부하게 되었고, setTimeout의 경우 컴포넌트가 완전히 제거 되었을때 함께 clearTimeout를 사용하여서 오류를 해결하였다.

html이 구성되는 시점을 파악하여서 요령껏 이것저것 넣어보면서 사용해야겠다.

onBeforeMount(() => {
  console.log("onBeforeMount");
  console.log(document.getElementById("test"));
});
// 화면에 보여지(등록)는 단계
onMounted(() => {
  console.log("onMounted");
  console.log(document.getElementById("test"));
});
// 화면이 갱신이 되기 전 단계
onBeforeUpdate(() => {
  console.log("onBeforeUpdate");
});
// 화면이 갱신이 되고 난 후 단계
onUpdated(() => {
  console.log("onUpdated");
});
// 컴포넌트가 화면에서 제거 되기 전 준비 단계
// : 메모리를 정리하는 곳
onBeforeUnmount(() => {
  console.log("onBeforeUnmount");
});
//컴포넌트가 완전히 제거되었을 때
onUnmounted(() => {
  clearTimeout(toastTimer.value);
  console.log("onUnmounted");
});

참고문서

vue 공식문서
https://v3.ko.vuejs.org/api/composition-api.html#%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%91%E1%85%B3%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8F%E1%85%B3%E1%86%AF-%E1%84%92%E1%85%AE%E1%86%A8-lifecycle-hooks