[vue3] 라이프사이클 생명주기

● 라이프사이클 생명주기

 

 

state 의 값이 변경될때, 실행 하고 싶은경우

 

컴포넌트를 빠져나가기 전, 후에 동작함

라우터로 다른 곳 이동할 경우,,? 에 실행됨

 

●  메모리 누수

만약에 /todos/15 에서 setTimeout 5초뒤에 disabled처리가 되어라 라고 설정했을때,

2초가 안되서 그 페이지를 나가게 될 경우, setTimeout을 사용하는것이 메모리만 차지하는 것이라는걸 알게 된다.

이럴경우,, onUnmounted(() => {}) 를 사용하면된다.

        const timeout = ref(null);

 

        onUnmounted(() => {

          console.log('unmouted');

          clearTimeout(timeout.value);

        })

 

        const triggerToast = (message, type = 'success') => {

          tostMessage.value = message;

          toastAlertType.value = type;

          showToast.value = true;

          timeout.value = setTimeout(() => {

            console.log('hello')

            tostMessage.value = '';

            toastAlertType.value = '';

            showToast.value = false;

          }, 3000);

        }

 

hello은 안찍히고

unmouted만 찍힘.