onBeforeUnMounted的使用场景

onBeforeUnMounted的使用场景

以前只是知道有onBeforeUnMounted这样一个生命周期，但是从来没有使用过，代码也没有报过错误偶然间遇到了这个问题，来记录一下

<template>
    <div>
    </div>
</template>

<script setup>
    import { ref,onMounted,onBeforeUnmount } from "vue";
    let num = ref(0);

    // 在created的时候开启一个计时器
    setInterval(() => {
        num.value += 1;
        console.log( num.value );
    }, 1000);

    // 页面加载后跳转到首页
    onMounted(()=>{
        navigateTo("/");
    })

    // 事实上在你跳转到新页面后改计时器仍然会存在    
</script>

这种定时器将会消耗内存，影响用户体验。当然这并不容易发现，假如你在计时器中异步访问DOM，当年跳转到下个页面DOM找不到则会发送错误。
总之VUE中使用定时器计时器一定要，在页面销毁时清除；

<template>
    <div>
    </div>
</template>

<script setup>
    import {
        ref,
        onMounted,
        onBeforeUnmount
    } from "vue";
    let num = ref(0);
    let time = null;
    // 在created的时候开启一个计时器
    time = setInterval(() => {
        num.value += 1;
        console.log(num.value);
    }, 1000);

    // 页面加载后跳转到首页
    onMounted(() => {
        navigateTo("/");
    })

    // 销毁前清除计时器
    onBeforeUnmount(() => {
        clearInterval(time);
    })
</script>