0Pricing
Sveltejs Academy · 课时

destroy() 清理函数

从操作中返回 destroy 函数，以清理事件监听器和观察器。

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

为什么需要清理

操作通常会添加监听器或观察器。元素卸载时，清理可以防止内存泄漏。

返回销毁函数

操作可以返回一个包含 destroy() 函数的对象。Svelte 会在卸载时调用它。

function listen(node) {
  function onClick() { /* ... */ }
  node.addEventListener("click", onClick);
  return { destroy() { node.removeEventListener("click", onClick); } };
}

与资源配对

凡是分配的资源（监听器、观察器、定时器）都应在销毁函数中释放。

幂等的销毁

销毁函数只会调用一次。不过，为了应对重复卸载的情况，请以防御式方式编写它。

组合 update 与销毁

同时返回这两者即可覆盖完整生命周期：响应参数变化，并在卸载时执行清理。

观察器

在销毁函数中暂停并断开 IntersectionObservers、ResizeObservers 和 MutationObservers。

动画帧

取消所有待处理的 requestAnimationFrame 循环，以免浪费资源。

异步清理

销毁函数可以是同步的。如果需要异步清理，请启动无需等待结果的清理任务。

内存分析

使用浏览器内存工具确认操作在卸载后释放了引用。

TypeScript 类型

返回类型来自 svelte/action，即 ActionReturn<Params>。

常见错误

忘记返回销毁函数，会使监听器在元素消失后仍保持连接。始终将添加与移除配对。

快速检查

销毁函数何时运行？

回顾

从操作中返回 { destroy }，以便在卸载时清理监听器和观察器。

常见问题解答

「destroy() 清理函数」课时是免费的吗？

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

「destroy() 清理函数」这节课中我会学到什么？

从操作中返回 destroy 函数，以清理事件监听器和观察器。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Sveltejs Academy 需要有经验吗？

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

「destroy() 清理函数」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. use: 指令语法
  2. 操作参数与更新
  3. destroy() 清理函数
  4. 实用操作：clickOutside、tooltip、autofocus
← 返回 Sveltejs Academy