Vue 中 destroyed 钩子函数的作用是什么？

推荐答案

在 Vue 中，destroyed 钩子函数是 Vue 实例生命周期中的一个钩子，它在 Vue 实例被销毁后调用。此时，Vue 实例的所有指令和事件监听器都已被移除，子组件也已被销毁。通常在这个钩子函数中执行一些清理操作，比如取消定时器、解绑事件监听器或清理手动创建的 DOM 元素等。

本题详细解读

1. destroyed 钩子的触发时机

destroyed 钩子函数在 Vue 实例被销毁后触发。Vue 实例的销毁通常发生在以下几种情况下：

• 使用 v-if 或 v-for 指令导致组件被移除。
• 手动调用 vm.$destroy() 方法销毁实例。
• 路由切换时，旧组件被销毁。

2. destroyed 钩子的常见用途

• 清理定时器：如果在 mounted 或 created 钩子中设置了定时器，可以在 destroyed 钩子中清除它们，以防止内存泄漏。
• 解绑事件监听器：如果在组件中手动绑定了事件监听器（如 window.addEventListener），可以在 destroyed 钩子中解绑这些监听器。
• 清理手动创建的 DOM 元素：如果组件中手动创建了 DOM 元素，可以在 destroyed 钩子中移除这些元素。

3. destroyed 钩子与 beforeDestroy 钩子的区别

• beforeDestroy 钩子在实例销毁之前调用，此时实例仍然完全可用，适合执行一些需要在销毁前完成的操作。
• destroyed 钩子在实例销毁之后调用，此时实例的所有指令和事件监听器都已被移除，适合执行一些清理操作。

4. 示例代码

// www.javascriptcn.com code example
export default {
  data() {
    return {
      timer: null
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      console.log('Timer is running');
    }, 1000);
  },
  destroyed() {
    clearInterval(this.timer);
    console.log('Component destroyed and timer cleared');
  }
};

在这个示例中，mounted 钩子中设置了一个定时器，destroyed 钩子中清除了这个定时器，确保组件销毁时不会留下未清理的资源。

5. 注意事项

• destroyed 钩子中不应该再访问 Vue 实例的数据或方法，因为此时实例已经被销毁。
• 如果需要在组件销毁前执行某些操作，应该使用 beforeDestroy 钩子。