Vue中外部模块共享ref()与provide/inject有何差异？为何选后者？

问题描述 #

我正试图理解provide/inject的适用场景。我希望在组件间共享值，曾查阅Vue官方文档了解到可通过provide/inject实现，但我产生了疑问：为何不直接使用外部模块共享ref()？

示例代码 #

sharedRef.js

import { ref } from 'vue';

export const myValue = ref(10);

Component A

<template>
  <div>
    <h2>Component A</h2>
    <p>Value in Component A: {{ myValue }}</p>
    <button @click="incrementInComponentA">Increment in Component A</button>
  </div>
</template>

<script setup>
import { myValue } from './sharedRef.js';

const incrementInComponentA = () => {
  myValue.value++;
};
</script>

Component B

<template>
  <div>
    <h2>Component B</h2>
    <p>Value in Component B: {{ myValue }}</p>
    <button @click="decrementInComponentB">Decrement in Component B</button>
  </div>
</template>

<script setup>
import { myValue } from './sharedRef.js';

const decrementInComponentB = () => {
  myValue.value--;
};
</script>

由于组件A和组件B均从同一外部文件导入myValue，它们共享同一个ref()值。那么，我为何还要选择使用provide/inject呢？

回答 #

• 作用域精准控制：共享ref是全局单例，整个应用内所有导入它的组件都能访问和修改，状态完全全局化。而provide/inject是基于组件树的作用域——只有当前组件的后代才能inject到值，且不同的组件树分支可以拥有独立的状态实例。比如你有多个独立的表单组件，每个表单需要自己的校验状态，用provide/inject可以让每个表单实例维护自己的状态，而共享ref会导致所有表单共用同一状态，互相干扰。

• 上下文动态适配：provide的值可以依赖提供组件的自身状态或props，父组件能根据自身情况动态提供不同的值，子组件inject到的是对应上下文的版本。比如一个主题组件，父组件根据当前主题模式provide不同的样式变量，所有子组件都能拿到对应主题的值；而共享ref只能是固定的全局值，无法随组件上下文动态调整。

• 避免全局状态污染：全局共享ref的修改是无边界的，任何组件都能修改它，排查状态变更时很难追踪来源。而provide/inject的状态变更通常由提供值的祖先组件控制，子组件可以只消费状态（或在约定的方式下修改），状态流向更清晰，维护性更强。

• 生命周期绑定：provide的值和提供它的组件生命周期绑定，当组件销毁时，对应的注入值会被清理（响应式状态会通知子组件）。而全局ref会一直存在于应用内存中，若某些组件已销毁但仍有引用，可能导致内存泄漏。

• 测试便捷性：测试使用inject的组件时，你可以在测试用例中手动provide模拟值，无需修改全局状态；而测试依赖全局ref的组件时，需要重置或mock整个模块，操作更繁琐，容易影响其他测试用例。

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