在Vue3.2和以上版本中,onUnmounted是一个生命周期钩子函数,它会在组件实例卸载之后被调用。它的作用和onBeforeUnmount类似,主要用于在组件卸载后清理一些资源,避免内存泄漏或者不必要的计算。
下面是一个使用script setup语法的例子,展示了如何在组件卸载后清除定时器:
<script setup>
import { ref, onUnmounted } from 'vue'
const count = ref(0)
const timer = ref(null)
const startTimer = () => {
timer.value = setInterval(() => {
count.value++
}, 1000)
}
const stopTimer = () => {
clearInterval(timer.value)
}
onUnmounted(() => {
stopTimer()
})
</script>
<template>
<div>
<p>计数器:{{ count }}</p>
<button @click="startTimer">开始计数</button>
<button @click="stopTimer">停止计数</button>
</div>
</template>