VUE3 依赖注入
依赖注入是什么？
依赖注入是一种设计模式，它允许将组件的依赖关系从组件内部转移到外部。在 Vue3 中，provide 和 inject 是实现这种依赖注入的工具。父组件通过 provide 提供数据，后代组件通过 inject 获取数据。这种机制特别适用于需要跨组件传递状态或配置的情况。
为什么使用依赖注入
在没有依赖注入机制之前，开发者经常会遇到组件属性逐级透传的问题，也就是组件的属性需要逐层往深层子组件进行传递，导致链路很长，非常麻烦。依赖注入机制可以解决这个问题，只需要在父组件提供依赖，任何层级的后代组件都可以注入该依赖。
如何使用依赖注入
1. 提供依赖
在父组件中使用 provide 函数提供数据：
import { provide, ref } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue3!');
provide('message', message);
}
};2. 注入依赖
在后代组件中使用 inject 函数注入数据：
import { inject } from 'vue';
export default {
setup() {
const message = inject('message');
return { message };
}
};依赖注入示例
简单依赖注入
父组件提供一个简单的字符串数据，子组件注入并显示：
// 父组件
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
setup() {
provide('message', 'Hello, Vue3!');
}
};
// 子组件
import { inject } from 'vue';
export default {
setup() {
const message = inject('message');
return { message };
}
};响应式数据注入
父组件提供一个响应式数据，子组件注入并实时更新：
// 父组件
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
setup() {
const count = ref(0);
provide('count', count);
}
};
// 子组件
import { inject } from 'vue';
export default {
setup() {
const count = inject('count');
return { count };
}
};默认值设置
在注入依赖时设置默认值，避免未找到依赖时出错：
// 子组件
import { inject } from 'vue';
export default {
setup() {
const message = inject('message', 'Default Message');
return { message };
}
};依赖注入进阶
Symbol 作为注入键
当应用程序变得复杂时，可能会发生键名冲突的情况。使用 Symbol 作为注入键可以有效避免这个问题：
// keys.ts
export const messageKey = Symbol('message');
// 父组件
<script setup lang="ts">
import { provide } from 'vue';
import { messageKey } from './keys';
provide(messageKey, 'Hello, Vue3!');
</script>
// 子组件
<script setup lang="ts">
import { inject } from 'vue';
import { messageKey } from './keys';
const message = inject(messageKey);
</script>读写分离模式
为了确保提供的状态不被注入组件任意修改，Vue3 推荐使用"读写分离"模式：
// 父组件
<script setup lang="ts">
import { provide, ref } from 'vue';
const count = ref(0);
function incrementCount() {
count.value++;
}
// 只提供只读的状态和修改它的方法
provide('count', {
get: () => count.value,
increment: incrementCount
});
</script>
// 子组件
<script setup lang="ts">
import { inject } from 'vue';
interface CountAPI {
get: () => number;
increment: () => void;
}
const { get: getCount, increment } = inject<CountAPI>('count')!;
</script>
<template>
<div>
<p>Count: {{ getCount() }}</p>
<button @click="increment">Increment</button>
</div>
</template>TypeScript 支持
Vue3 提供了 InjectionKey 接口，可以结合 TypeScript 泛型使用，提供类型安全
// types.ts
import { InjectionKey } from 'vue';
export interface UserInfo {
name: string;
role: string;
}
export const UserKey: InjectionKey<UserInfo> = Symbol('user');
// 父组件
<script setup lang="ts">
import { provide } from 'vue';
import { UserKey } from './types';
provide(UserKey, {
name: 'Simin',
role: 'Admin'
});
</script>
// 子组件
<script setup lang="ts">
import { inject } from 'vue';
import { UserKey } from './types';
// 类型安全的注入，TypeScript 会知道 user 是 UserInfo 类型
const user = inject(UserKey);
</script>应用级依赖注入全局状态管理
Vue3 允许在应用级别提供依赖，这些依赖在整个应用中都可用
// 应用级别
import { createApp } from 'vue';
const app = createApp({});
app.provide('globalState', { name: 'Global State' });
// 任意组件
import { inject } from 'vue';
export default {
setup() {
const globalState = inject('globalState');
return { globalState };
}
};与 Props 和 Vuex/Pinia 的比较
| 机制 适用场景 | 优点 | 缺点 |
|---|---|---|
| Props | 父子组件通信 | 显式、类型安全 |
| 依赖注入 | 跨多级组件通信 | 避免属性透传、解耦组件 |
| Vuex/Pinia | 全局状态管理 | 集中管理、开发工具支持 |
性能与优化建议
1. 避免过度使用：依赖注入虽然便捷，但会增加组件之间的隐式耦合，应适度使用。
合理组织依赖：将相关的依赖放在最近的共同祖先组件中提供，而不是全部放在根组件。
使用工厂函数作为默认值：当注入值可能不存在时，使用函数作为默认值可以避免不必要的计算。
<script setup lang="ts">
import { inject } from 'vue';
const expensiveComputation = () => {
// 一些昂贵的计算
return { result: 'computed value' };
};
// 使用工厂函数作为默认值
const result = inject('key', () => expensiveComputation());
</script>- 利用 Vue 的响应式系统：提供响应式数据时，确保保持其响应式特性
<script setup lang="ts">
import { provide, ref } from 'vue';
// 正确的方式
const count = ref(0);
provide('count', count); // 提供响应式对象
// 错误的方式
// provide('count', count.value); // 提供的是值而非响应式对象
</script>注意事项
- 响应式数据：当提供/注入响应式的数据时，建议尽可能将任何对响应式状态的变更都保持在供给方组件中。这样可以确保所提供状态的声明和变更操作都内聚在同一个组件内，使其更容易维护。
- Symbol 作为键：为了避免潜在的键名冲突，Vue3 推荐使用 Symbol 作为注入名的键。
- 性能问题：依赖注入可能会导致性能问题，因为 Vue 需要遍历整个组件树来查找提供者。在大型应用中，应谨慎使用依赖注入。
- 使用泛型：在使用 TypeScript 时，可以使用 InjectionKey 泛型类型，并使用注入值的类型作为泛型参数，以提供更高级的依赖注入场景。
- 声明默认值：如果在注入一个值时不要求必须有提供者，那么应该声明一个默认值。默认值可以是具体的值，也可以是函数。使用工厂函数可以避免在用不到默认值的情况下进行不必要的计算或产生副作用。
