Vue3中为何要在组合式函数中使用useFunc()？

直接导出响应式变量（比如compose2.js的写法）确实能实现组件间状态同步，但用useFunc()包裹的写法（compose1.js）有几个关键优势，完全符合你要的低复杂度有状态复用需求：

• 实现组件间状态隔离
  直接导出的reactive对象是全局单例——所有使用它的组件共享同一个状态实例，修改一个组件的状态，其他组件都会跟着变化。而调用useFunc()时，每次都会创建新的响应式变量实例，不同组件能拥有独立的状态，互不干扰。比如两个组件都调用useFunc()，各自修改varName，对方不会受到任何影响。

• 封装关联逻辑与副作用
  你可以把和状态相关的逻辑（比如生命周期钩子、异步请求、监听逻辑）直接写在useFunc()里，不用在每个组件里重复编写。示例如下：

  export const useFunc = () => {
    const varName = reactive({ count: 0 })
    const increment = () => varName.count++
  
    onMounted(() => {
      console.log('组件挂载时初始化状态')
    })
    onUnmounted(() => {
      console.log('组件卸载时清理资源')
    })
  
    return { varName, increment }
  }
  

  这种写法能把状态和操作逻辑打包复用，直接导出变量的话，这些关联逻辑只能散落在各个组件里，复用性极差。

• 支持动态初始化状态
  useFunc()可以接收参数，根据不同的输入生成不同的初始状态。比如：

  export const useFunc = (initialCount) => {
    const varName = reactive({ count: initialCount || 0 })
    return { varName }
  }
  

  组件调用时可以传useFunc(10)或者useFunc(0)，灵活调整初始值。而直接导出的变量初始化是固定的，没法动态配置。

• 隐藏内部实现细节
  你可以只对外暴露需要的状态和方法，内部的临时变量或私有逻辑不会被外部访问到。比如在useFunc()里有个内部用的tempRef，不需要导出的话就可以藏起来，避免外部误修改内部状态。直接导出变量的话，所有属性都是公开的，很容易被意外篡改。

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