Vue3 Composition API：同一组件多实例独立状态实现

你遇到的问题核心原因是响应式状态被放在了所有组件实例共享的作用域中，而非每个实例的独立作用域。Options API 的 data 是返回新对象的函数，每次实例化都会创建独立状态；但如果错误地把 Composition API 的响应式变量声明在模块顶层、或外部单例模块中，就会导致所有实例复用同一个状态引用。

正确实现方式 #

1. 直接在组件内部声明独立状态

无论是用 <script setup> 还是普通的 setup 函数，只要把响应式变量放在组件的 setup 作用域内，每个实例都会重新执行这段代码，生成独立的状态：

<script setup>
import { ref } from 'vue'

// 每个组件实例都会创建独立的 status 变量
const status = ref(null)

const startLoading = () => {
  status.value = 'loading'
  setTimeout(() => {
    status.value = 'completed'
  }, 2000)
}
</script>

<template>
  <div>
    <button @click="startLoading">触发加载</button>
    <p>当前状态：{{ status }}</p>
  </div>
</template>

如果使用普通的 setup 写法：

<script>
import { ref } from 'vue'

export default {
  setup() {
    const status = ref(null)
    
    const startLoading = () => {
      status.value = 'loading'
      setTimeout(() => {
        status.value = 'completed'
      }, 2000)
    }
    
    return { status, startLoading }
  }
}
</script>

2. 复用逻辑时用组合式函数封装状态

如果需要在多个组件中复用 Loader 的逻辑，同时保证每个实例状态独立，要把状态封装在组合式函数中，每次调用函数都会返回全新的响应式变量：

// composables/useLoader.js
import { ref } from 'vue'

export function useLoader() {
  // 每次调用 useLoader 都会创建新的 status
  const status = ref(null)
  
  const startLoading = () => {
    status.value = 'loading'
    setTimeout(() => {
      status.value = 'completed'
    }, 2000)
  }
  
  return { status, startLoading }
}

在组件中使用：

<script setup>
import { useLoader } from './composables/useLoader'

// 每个组件实例调用 useLoader，得到独立的状态
const { status, startLoading } = useLoader()
</script>

避坑要点 #

• 绝对不要把响应式变量声明在组件模块的顶层作用域（setup 函数/<script setup> 代码之外），否则会变成所有实例共享的单例状态。
• 不要直接导入外部模块中导出的响应式变量，除非你确实需要全局共享状态；如果需要复用逻辑但状态独立，一定要用组合式函数包裹。

内容的提问来源于stack exchange，提问作者fabian.bhl