嘿，各位靓仔靓女，欢迎来到今天的Vue.js深度按摩放松讲座！今天咱们不搞虚的，直接上干货，聊聊Vue的provide/inject这对欢喜冤家，看看怎么用它们在组件树里愉快地传递数据和功能，同时还能保持代码的优雅和可维护性。
Part 1: 啥是 Provide/Inject？为啥要用它？
首先，咱们得搞清楚provide/inject是干嘛的。简单来说，它就是Vue提供的一种允许我们在祖先组件中“提供”数据或方法，然后在后代组件中“注入”这些数据或方法的机制。
你可能会问：“这不就是Prop Drilling吗？一层一层往下传，我熟！”
没错，Prop Drilling确实可以实现数据传递，但当组件层级很深的时候，Prop Drilling就变得非常痛苦：
- 代码冗余： 中间组件可能根本不需要这些数据，但为了传给更深层的组件，不得不声明并传递这些props。
- 维护困难： 如果顶层组件的数据结构发生变化，所有相关的中间组件都要跟着修改。
- 可读性差： 组件的props列表会变得很长，难以理解组件的职责。
provide/inject就是来解决这些问题的。它允许我们直接从祖先组件获取数据，而无需中间组件的参与，就像在组件树里开辟了一条高速公路，数据直接嗖嗖嗖地就过去了。
咱们来举个栗子：
假设你有一个应用，你需要在一个很深的组件中访问用户身份信息。使用Prop Drilling，你可能需要这样写：
<!-- App.vue (祖先组件) -->
<template>
<MyComponent :user="user" />
</template>
<script>
export default {
data() {
return {
user: {
id: 1,
name: '张三',
},
};
},
};
</script>
<!-- MyComponent.vue (中间组件) -->
<template>
<AnotherComponent :user="user" />
</template>
<script>
export default {
props: {
user: {
type: Object,
required: true,
},
},
};
</script>
<!-- AnotherComponent.vue (深层组件) -->
<template>
<div>
你好，{{ user.name }}！
</div>
</template>
<script>
export default {
props: {
user: {
type: Object,
required: true,
},
},
};
</script>可以看到，MyComponent组件只是一个中转站，它并不需要user信息，但为了传递给AnotherComponent，不得不声明user prop。
而使用provide/inject，我们可以这样写：
<!-- App.vue (祖先组件) -->
<template>
<MyComponent />
</template>
<script>
export default {
provide: {
user: {
id: 1,
name: '张三',
},
},
};
</script>
<!-- MyComponent.vue (中间组件) -->
<template>
<AnotherComponent />
</template>
<script>
export default {};
</script>
<!-- AnotherComponent.vue (深层组件) -->
<template>
<div>
你好，{{ user.name }}！
</div>
</template>
<script>
export default {
inject: ['user'],
};
</script>看到了吗？MyComponent组件不再需要关心user信息，AnotherComponent组件直接通过inject就可以获取到user信息。
Part 2: Provide/Inject 的基本用法
现在，咱们来详细看看provide/inject的基本用法。
1. Provide (提供)
provide选项允许我们在组件中指定要提供给后代组件的数据或方法。它可以是一个对象，也可以是一个返回对象的函数。
-
对象形式：
export default { provide: { message: 'Hello, world!', appName: 'My Awesome App', }, }; -
函数形式：
export default { data() { return { count: 0, }; }, provide() { return { count: this.count, // 注意这里，provide函数中的this指向当前组件实例 increment: () => { this.count++; }, }; }, };使用函数形式的好处是，我们可以动态地提供数据，并且可以访问组件实例的
data和methods。
2. Inject (注入)
inject选项允许我们在组件中声明要从祖先组件注入的数据或方法。它可以是一个字符串数组，也可以是一个对象。
-
字符串数组形式：
export default { inject: ['message', 'appName'], mounted() { console.log(this.message); // 输出 "Hello, world!" console.log(this.appName); // 输出 "My Awesome App" }, }; -
对象形式：
export default { inject: { message: { from: 'message', // 可以指定注入的key，默认和声明的变量名相同 default: 'Default Message', // 如果祖先组件没有提供该数据，则使用默认值 }, appName: { from: 'appName', required: true, // 如果祖先组件没有提供该数据，则会抛出警告 }, }, mounted() { console.log(this.message); console.log(this.appName); }, };使用对象形式可以更灵活地配置注入行为，例如指定注入的key，提供默认值，以及强制要求祖先组件提供数据。
Part 3: 高级用法：响应式数据、依赖注入
provide/inject不仅仅可以传递静态数据，还可以传递响应式数据和方法，甚至可以实现依赖注入。
1. 响应式数据传递
如果你想让后代组件能够响应祖先组件数据的变化，你需要使用ref或reactive来提供响应式数据。
<!-- Parent.vue -->
<template>
<Child />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
setInterval(() => {
count.value++;
}, 1000);
return {
count,
};
},
provide() {
return {
count: this.count, // 注意这里，要提供的是ref对象本身
};
},
};
</script>
<!-- Child.vue -->
<template>
<div>
Count: {{ count }}
</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
const count = inject('count');
return {
count,
};
},
};
</script>在这个例子中，Parent组件使用ref创建了一个响应式数据count，并通过provide将其提供给后代组件。Child组件通过inject获取到count，并将其渲染到页面上。当Parent组件的count发生变化时，Child组件也会自动更新。
注意： 这里需要提供的是ref对象本身，而不是ref.value。因为ref对象是一个响应式对象，它可以追踪数据的变化。
2. 依赖注入
provide/inject还可以用于实现依赖注入，这在大型项目中非常有用。
假设你有一个ApiService类，用于处理API请求：
// api-service.js
class ApiService {
constructor(baseUrl) {
this.baseUrl = baseUrl;
}
async get(endpoint) {
const response = await fetch(`${this.baseUrl}/${endpoint}`);
return await response.json();
}
}
export default ApiService;你可以在根组件中创建一个ApiService实例，并通过provide将其提供给所有后代组件：
<!-- App.vue -->
<template>
<MyComponent />
</template>
<script>
import ApiService from './api-service';
export default {
provide() {
return {
apiService: new ApiService('https://api.example.com'),
};
},
};
</script>
<!-- MyComponent.vue -->
<template>
<div>
Data: {{ data }}
</div>
</template>
<script>
import { inject, ref, onMounted } from 'vue';
export default {
setup() {
const apiService = inject('apiService');
const data = ref(null);
onMounted(async () => {
data.value = await apiService.get('data');
});
return {
data,
};
},
};
</script>在这个例子中，MyComponent组件通过inject获取到apiService实例，并使用它来获取数据。
Part 4: Provide/Inject 的最佳实践和注意事项
虽然provide/inject很强大，但如果不合理使用，也可能会导致代码难以维护。以下是一些最佳实践和注意事项：
-
明确提供的数据或方法的职责： 确保提供的数据或方法与组件的职责相关，避免提供不必要的数据或方法。
-
使用Symbol作为key： 为了避免命名冲突，可以使用Symbol作为
provide和inject的key。// constants.js export const API_SERVICE = Symbol('apiService'); // App.vue import { API_SERVICE } from './constants'; export default { provide() { return { [API_SERVICE]: new ApiService('https://api.example.com'), }; }, }; // MyComponent.vue import { API_SERVICE } from './constants'; export default { inject: { apiService: { from: API_SERVICE, required: true, }, }, }; -
使用readonly避免意外修改： 如果你不想让后代组件修改祖先组件提供的数据，可以使用
readonly函数来包装数据。import { readonly } from 'vue'; export default { provide() { return { user: readonly({ id: 1, name: '张三', }), }; }, }; -
谨慎使用：
provide/inject会增加组件之间的耦合度，因此要谨慎使用。只有在确实需要跨层级传递数据或方法时才考虑使用它。 -
替代方案： 在某些情况下，可以使用
Vuex或Pinia等状态管理工具来代替provide/inject。这些工具提供了更强大的状态管理功能，并且更容易维护。
Part 5: Provide/Inject的优缺点总结
为了方便大家更好地理解provide/inject，我总结了一个表格，对比了它的优缺点：
| 特性 | 优点 |
|---|---|