Vue3中export/import与provide/inject的区别及项目适用场景

先看你给出的两种写法：

第一种是依赖注入方式：

// parent
const data = provide('data', ref(0))

// child
const data = inject('data')

第二种是模块导入方式：

// parent
export const data = ref(0)

// child
import { data } from './parent'

这俩写法表面上都能实现响应式数据传递，但底层逻辑和适用场景差很多，具体区别如下：

核心区别 #

1. 作用域完全不同 #

• provide/inject是组件树级别的作用域：只有当前父组件（或祖先组件）的后代组件才能拿到数据，组件如果脱离这个组件树（比如单独挂载的弹窗），根本inject不到。而且每个父组件实例提供的是独立的数据副本（只要ref是在setup里创建的），多个父组件实例的子组件拿到的是各自的data。
• 直接导入是模块级别的全局作用域：这个ref是模块导出的单例，任何地方import都会拿到同一个实例，不管组件在不在同一个组件树里，改了之后所有用到的地方都会同步变化。

2. 组件隔离性不同 #

• 用provide/inject的组件，数据是和父组件实例绑定的，组件复用的时候不会互相干扰。比如你写了一个带状态的父组件，复用两次，各自的子组件拿到的data是独立的。
• 直接导入的话，所有复用的组件共享同一个data，改一个全变，很容易出现意料之外的状态污染。

3. 灵活性不同 #

• provide可以动态调整：比如在父组件的setup里根据条件提供不同的数据，或者用app.provide给整个应用全局注入数据，适配不同场景。
• 直接导入的模块数据是固定的，虽然可以改ref的值，但没法根据组件上下文切换不同的数据实例。

4. 类型与可维护性 #

• provide/inject如果不用InjectionKey，TypeScript会把注入的数据识别为unknown，需要手动处理类型；但跨多层组件传递时，比层层传props要简洁，不会出现props drilling的问题。
• 直接导入的类型是自动推导的，一目了然，但如果项目里到处用这种方式共享数据，会导致模块依赖关系混乱，后期很难追踪数据的修改来源。

实际项目选型建议 #

• 选provide/inject的场景：跨2层以上组件传递数据，且数据属于某个组件实例的私有状态（不同实例数据独立），比如页面组件给所有子组件提供当前页面的权限状态、布局配置。
• 选模块导入的场景：仅适用于非常简单的全局常量/状态，而且确定不会有多个实例的需求，比如全局的主题开关（但更推荐用Pinia这类状态管理库替代，因为模块导入的方式没法很好地处理状态变更的追踪和调试）。
• 如果是父子组件直接传递，优先用props，比这俩都直接清晰。

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