在 Vue 组件中，定时器应该在哪里以及如何被销毁，才能避免内存泄漏？

回答思路

1. 【回答框架 1】在 Vue 组件中，定时器（如 setInterval 或 setTimeout）应在组件销毁前清除，以避免内存泄漏和无效回调。核心做法是在 beforeDestroy（Vue 2）或 onBeforeUnmount（Vue 3）生命周期钩子中调用 clearInterval 或 clearTimeout。
2. 【回答框架 2】推荐将定时器实例存储在组件实例的 data 或自定义属性上，例如 this.timer = setInterval(...)，然后在销毁钩子中通过 clearInterval(this.timer) 清除。对于 Vue 3 组合式 API，可使用 const timer = ref(null) 或普通变量，并在 onBeforeUnmount 中清除。
3. 【回答框架 3】另一种方式是使用 Vue 的 $once 监听 beforeDestroy 事件，但更推荐直接在生命周期钩子中处理，因为更直观且易于维护。
4. 【回答框架 4】如果定时器在多个地方创建，应统一管理，例如使用一个数组存储所有定时器 ID，并在销毁时遍历清除。
5. 【回答框架 5】对于 Vue 3 的 <script setup> 语法，同样在 onBeforeUnmount 中清除，确保组件卸载后不再触发回调。
6. 【关键点 1】在 beforeDestroy（Vue 2）或 onBeforeUnmount（Vue 3）中清除定时器。
7. 【关键点 2】将定时器 ID 存储在组件实例属性或变量中，便于清除。
8. 【关键点 3】使用 clearInterval 或 clearTimeout 对应清除。
9. 【关键点 4】避免在组件销毁后定时器回调仍执行，导致内存泄漏或错误操作。
10. 【易错点 1】不要在 created 或 mounted 中创建定时器后忘记在销毁钩子中清除。
11. 【易错点 2】不要使用匿名定时器而不保存 ID，导致无法清除。
12. 【易错点 3】注意 Vue 3 中 beforeDestroy 已更名为 onBeforeUnmount，使用错误钩子会导致清理失效。