当前位置：首页 > VUE

vue如何实现销毁钩子

2026-01-20 01:03:41VUE

Vue 销毁钩子的实现方式

Vue 组件生命周期中，销毁相关的钩子函数主要用于在组件被销毁前执行清理操作，例如取消事件监听、清除定时器或释放资源。以下是关键钩子函数及实现方法：

`beforeDestroy` 钩子

在实例销毁之前调用，此时组件仍完全可用，适合执行清理逻辑。

export default {
  beforeDestroy() {
    // 清理逻辑，例如移除事件监听
    window.removeEventListener('resize', this.handleResize);
    // 清除定时器
    clearInterval(this.timer);
  }
}

`destroyed` 钩子

在实例销毁后调用，此时所有绑定和指令均已解绑，子实例也被销毁。通常用于确认资源释放。

export default {
  destroyed() {
    console.log('组件已销毁，资源已释放');
  }
}

使用场景示例

取消事件监听
在组件中绑定的全局事件（如 resize）需在销毁时移除，避免内存泄漏。

export default {
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 处理逻辑
    }
  }
}

清除定时器
组件内设置的 setInterval 或 setTimeout 需在销毁时清除。

export default {
  data() {
    return { timer: null };
  },
  mounted() {
    this.timer = setInterval(() => {
      console.log('定时任务');
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
}

注意事项

异步操作：若销毁时有未完成的异步任务（如 API 请求），可在 beforeDestroy 中取消请求（例如使用 Axios 的 CancelToken）。
Vue 3 变化：在 Vue 3 中，beforeDestroy 更名为 beforeUnmount，destroyed 更名为 unmounted，但功能类似。

vue如何实现销毁钩子