Nuxt 3屏幕尺寸检测失效如何修复？computed早于onMounted执行

你的问题根源有两个：一是错误地将响应式计算属性转为静态值，二是仅在组件挂载时获取一次尺寸，未处理窗口 resize 场景。以下是具体修复方案：

1. 核心问题修复：保留计算属性的响应式 #

你当前代码中，isMobile直接取了computed().value，这会把响应式的计算属性转换为初始化时的静态值，后续size更新时不会触发重新计算。需要去掉.value，保留计算属性的响应式引用：

<template><main ref="page" class="w-100 h-100"> ... </main></template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue';

const size = ref<number>(1200);
const page = ref(null);

// 封装更新尺寸的方法
const updateSize = () => {
  // 若需要页面容器宽度，用page.value?.clientWidth
  // 若需要屏幕视口宽度，直接用window.innerWidth更准确
  size.value = page.value ? page.value.clientWidth : window.innerWidth;
};

onMounted(() => {
  // 挂载时初始化尺寸
  updateSize();
  // 监听窗口resize事件，实时更新尺寸
  window.addEventListener('resize', updateSize);
});

onUnmounted(() => {
  // 组件卸载时移除监听，避免内存泄漏
  window.removeEventListener('resize', updateSize);
});

// 保留计算属性的响应式，不要加.value
const isMobile = computed(() => {
  return size.value < 768;
});

const showModal = ref(false);
</script>

2. 优化建议：直接监听视口宽度（可选） #

如果不需要依赖特定DOM元素的宽度，而是直接检测屏幕视口尺寸，可以简化代码，无需DOM引用：

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue';

const viewportWidth = ref<number>(window.innerWidth);

const updateViewportWidth = () => {
  viewportWidth.value = window.innerWidth;
};

onMounted(() => {
  window.addEventListener('resize', updateViewportWidth);
});

onUnmounted(() => {
  window.removeEventListener('resize', updateViewportWidth);
});

const isMobile = computed(() => viewportWidth.value < 768);
const showModal = ref(false);
</script>

关键说明 #

• 计算属性computed返回的是响应式对象，直接赋值.value会丢失响应式能力，必须保留引用才能随依赖值更新。
• 添加resize事件监听可确保窗口尺寸变化时，尺寸变量实时更新，进而触发isMobile的自动重新计算。
• 组件卸载时移除事件监听，避免内存泄漏。

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