PricingLoginStart free
Vue Academy · 课时

onUnmounted 与清理模式

在 onUnmounted 中清除间隔、移除事件监听器和取消请求。

第 4 / 4 课13 个步骤

onUnmounted 与清理模式 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

做好清理工作

组件被移除后，它启动的任何内容——计时器、监听器、订阅和网络请求——都会继续运行，除非您将其停止。onUnmounted 钩子就是执行清理的地方，可以防止内存泄漏和错误。

onUnmounted 钩子

onUnmounted 在组件从 DOM 中移除后触发。这是释放资源的最后机会。

<script setup>
import { onUnmounted } from 'vue'
onUnmounted(() => {
  console.log('component removed')
})
</script>

模式：清除间隔计时器

如果您在 onMounted 中启动了一个间隔计时器，就应在 onUnmounted 中清除它。否则组件消失后回调仍会继续触发，常常会因访问不存在的状态而崩溃。

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

模式：移除事件监听器

注册在 window 或 document 上的全局监听器不会随组件移除而消失。请始终将 addEventListener 与 removeEventListener 配对使用。

<script setup>
import { onMounted, onUnmounted } from 'vue'
function onResize() {}
onMounted(() => window.addEventListener('resize', onResize))
onUnmounted(() => window.removeEventListener('resize', onResize))
</script>

模式：中止获取请求

组件卸载后才完成的待处理请求可能会尝试更新已销毁组件的状态。请使用 AbortController 在清理期间取消请求。

<script setup>
import { onMounted, onUnmounted } from 'vue'
const controller = new AbortController()
onMounted(() => {
  fetch('/api/data', { signal: controller.signal })
})
onUnmounted(() => controller.abort())
</script>

模式：取消订阅

对存储、套接字或事件总线的订阅都必须拆除。请保存取消订阅函数，并在 onUnmounted 中调用它。

<script setup>
import { onMounted, onUnmounted } from 'vue'
let unsubscribe
onMounted(() => { unsubscribe = store.subscribe(handler) })
onUnmounted(() => unsubscribe && unsubscribe())
</script>

监听会返回停止函数

调用 watch 会返回一个可以停止监听的函数。在设置逻辑期间创建的监听器会自动停止，但之后创建的监听器（例如在另一个回调中创建的监听器）应手动停止。

<script setup>
import { watch, onUnmounted } from 'vue'
const stop = watch(source, handler)
onUnmounted(() => stop())
</script>

watchEffect 清理回调

在 watchEffect 中，您会获得一个 onCleanup 函数，用于在下一次运行前或停止时执行清理。这样可以让每次运行所创建的资源保持整洁。

watchEffect((onCleanup) => {
  const timer = setTimeout(doWork, 500)
  onCleanup(() => clearTimeout(timer))
})

为什么清理很重要

跳过清理会导致内存泄漏（资源始终未被释放）、重复监听器（多次挂载后监听器不断叠加）以及错误（回调访问已销毁的状态）。整洁的代码总会拆除自己创建的内容。

组合式函数让清理自动完成

编写良好的组合式函数会在 onUnmounted 中注册自己的清理逻辑。这就是 VueUse 中的 useEventListener 等组合式函数会替您移除监听器的原因——清理逻辑已经内置。

清理检查清单

  • setInterval/setTimeout -> 清除它们。
  • addEventListener -> 移除它。
  • 获取数据 -> 使用 AbortController 中止请求。
  • 订阅 -> 调用取消订阅函数。
  • 手动创建的监听器 -> 调用返回的停止函数。

快速检查

请测试您对清理操作的掌握程度。

在交互式课程中回答

回顾

清理要点：

  • onUnmounted 在移除后运行——请在这里释放资源。
  • 清除间隔计时器和延时计时器，移除监听器，中止获取请求，取消订阅。
  • 需要时，watch 会返回一个停止函数，可在 onUnmounted 中调用。
  • watchEffect 提供 onCleanup 回调，用于清理每次运行创建的资源。
免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程
42
课程
156
免费开始学习查看完整课程

常见问题解答

「onUnmounted 与清理模式」课时是免费的吗？

是的 — 「onUnmounted 与清理模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「onUnmounted 与清理模式」这节课中我会学到什么？

在 onUnmounted 中清除间隔、移除事件监听器和取消请求。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「onUnmounted 与清理模式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 生命周期阶段概览
  2. onMounted 与 onBeforeMount
  3. onUpdated 与 onBeforeUpdate
  4. onUnmounted 与清理模式
← 返回 Vue Academy