Vue3.2 中onUnmounted用法和作用（vue中的onload）

在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>

上面的代码中，我们定义了一个计数器count和一个定时器timer，当用户点击"开始计数"按钮时，我们会启动一个定时器，在定时器中更新计数器count的值。当用户点击"停止计数"按钮时，我们会清除定时器以停止计数器。

在setup函数中，我们使用onUnmounted钩子函数注册了一个回调函数，在组件卸载时会执行这个回调函数，其中我们调用了stopTimer函数停止计数器。

需要注意的是，如果一个组件使用了keep-alive，那么卸载钩子不会被调用。此时，我们需要使用deactivated钩子来进行清理操作。