● 라이프사이클 생명주기
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만 찍힘.
'FRONT > VUE' 카테고리의 다른 글
[vue3] vuex란? (0) | 2024.04.25 |
---|---|
[vue3] teleport, slot 사용법 (0) | 2024.04.24 |
[vue3] 자바스크립트 객체 복사/비교 (0) | 2024.04.24 |
[vue3] 이벤트 버블링 이란? (0) | 2024.04.24 |
[vue3] router-view 사용법 (0) | 2024.04.23 |