Nuxt3中在Composable导出useBreakpoints生成的Ref是否安全？

Nuxt 3文档指出，绝不能在<script setup>外部定义ref，因为这会“被所有访问网站的用户共享，并可能导致内存泄漏！”

我想要使用VueUse的useBreakpoints，于是将其放在composable中导出，并在各个组件中使用。但我发现它们的类型是globalThis.Ref，请问这样直接使用是否安全，还是会像Nuxt文档所说的那样出现严重问题？

我的代码如下：

// file: composables/useMedia.ts

import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints(breakpointsTailwind)
export const isDesktop = breakpoints.greaterOrEqual('lg')
export const isTablet = breakpoints.greaterOrEqual('sm') && breakpoints.smaller('lg')
export const isMobile = breakpoints.smaller('sm')

这种写法不安全，会触发Nuxt文档提到的共享状态和内存泄漏问题。

你当前的代码是在composable的顶层作用域直接创建breakpoints和对应的响应式变量，这些变量属于全局单例——所有访问网站的用户都会共用同一个实例，不仅会导致响应式状态混乱（比如A用户的屏幕尺寸变化会影响B用户的状态），还可能因为长期持有全局引用引发内存泄漏。

正确的做法是将这些逻辑封装到一个函数中，让每个组件调用时都创建独立的实例：

// file: composables/useMedia.ts

import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

export default function useMedia() {
  const breakpoints = useBreakpoints(breakpointsTailwind)
  const isDesktop = breakpoints.greaterOrEqual('lg')
  const isTablet = breakpoints.greaterOrEqual('sm') && breakpoints.smaller('lg')
  const isMobile = breakpoints.smaller('sm')

  return {
    isDesktop,
    isTablet,
    isMobile
  }
}

在组件中使用时，调用这个函数获取独立的响应式变量：

<script setup>
const { isDesktop, isMobile } = useMedia()
</script>

这样每个组件实例（以及每个用户）都会拥有自己的breakpoints实例和响应式状态，完全符合Nuxt的状态管理规范，不会出现共享状态的问题。

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