Vue全局属性挂载窗口尺寸工具遇生命周期钩子调用错误问题

问题原因 #

你遇到的onMounted/onUnmounted报错，是因为这类Vue生命周期钩子只能在组件的setup()函数执行期间调用。你的useBreakpoints方法挂载在全局插件的SidebarStore对象上，调用它时没有关联任何活跃的组件实例，所以触发警告；同时因为钩子没正确注册，onUnmounted里的移除监听逻辑也不会执行。

解决方案 #

将窗口断点监听逻辑重构为独立的组合式函数，让它在组件的setup上下文里被调用，这样生命周期钩子就能绑定到组件实例上。

修改后的代码 #

import { computed, onMounted, onUnmounted, ref } from "vue";

// 独立组合式函数：处理窗口尺寸监听与断点判断
export function useBreakpoints() {
  const windowWidth = ref(window.innerWidth);

  const onWidthChange = () => {
    windowWidth.value = window.innerWidth;
  };

  // 此时钩子会绑定到调用该函数的组件实例
  onMounted(() => window.addEventListener('resize', onWidthChange));
  onUnmounted(() => window.removeEventListener('resize', onWidthChange));

  const type = computed(() => {
    if (windowWidth.value < 550) return 'xs';
    if (windowWidth.value >= 550 && windowWidth.value < 1200) return 'md';
    if (windowWidth.value >= 1200) return 'lg';
    return null;
  });

  const width = computed(() => windowWidth.value);

  return { width, type };
}

// 侧边栏状态管理：仅负责侧边栏相关状态
const SidebarStore = {
  showSidebar: ref(false),
  isMinimized: ref(false),
  displaySidebar(value) {
    this.showSidebar.value = value;
  }
};

const SidebarPlugin = {
  install(app, options) {
    if (options && options.sidebarLinks) {
      SidebarStore.sidebarLinks = options.sidebarLinks;
    }
    // 注册侧边栏全局属性
    app.config.globalProperties.$sidebar = SidebarStore;
    app.provide('sidebar', SidebarStore);
    // 注册组合式函数到全局，方便组件调用
    app.config.globalProperties.$useBreakpoints = useBreakpoints;
    app.provide('useBreakpoints', useBreakpoints);
  }
};

export default SidebarPlugin;

组件中使用方式 #

在任意组件的setup里调用组合式函数即可：

<template>
  <div>当前窗口宽度：{{ breakpoint.width }}px</div>
  <div>当前断点类型：{{ breakpoint.type }}</div>
</template>

<script setup>
// 方式1：直接导入
import { useBreakpoints } from './SidebarPlugin';
// 方式2：通过inject获取全局提供的函数
// import { inject } from 'vue';
// const useBreakpoints = inject('useBreakpoints');

const breakpoint = useBreakpoints();
</script>

改动说明 #

• 拆分逻辑：将窗口监听与侧边栏状态管理分离，符合单一职责原则。
• 正确绑定生命周期：组合式函数在组件setup内调用时，onMounted/onUnmounted会关联当前组件实例，不再报错；组件卸载时会自动移除resize监听，避免内存泄漏。
• 全局可用性：通过插件将组合式函数注册到全局，所有组件都能便捷使用。

内容的提问来源于stack exchange，提问作者kralyolda