provide/inject原理

### Vue.js 中 `provide` 和 `inject` 的工作原理 #### 工作原理概述 在 Vue.js 中，`provide` 和 `inject` 是一对用于跨组件层次结构进行依赖注入的 API。它们允许祖先组件向任意后代组件提供数据或方法，而无需通过中间的每一层手动传递 props 或事件[^3]。 尽管 `provide` 和 `inject` 不会自动创建响应式绑定，但如果提供了可观察的对象，则该对象内部的属性仍然是响应式的[^1]。这意味着即使父级的数据本身不是响应式的，它的某些部分仍然可以被动态更新并反映到子组件中。 #### 实现机制分析 Vue 内部实现了基于上下文环境（context）来管理 `provide` 和 `inject` 数据流的方式： 1. **Provide 阶段** 当定义一个组件时，在选项中指定 `provide` 方法或者直接赋值给它。如果是一个函数形式的话，每次实例化都会调用此函数返回新的值；如果是静态对象则共享同一份引用。 ```javascript const ParentComponent = { data() { return { message: 'Hello from parent!' }; }, provide() { return { sharedMessage: this.message, }; } }; ``` 2. **Inject 阶段** 子孙节点可以通过声明 `inject` 属性列表获取由最近的一个先祖所提供的对应名称项。一旦完成匹配过程之后，这些变量就会成为当前作用域下的局部成员供访问使用。 ```javascript const ChildComponent = { inject: ['sharedMessage'], template: `<div>{{ sharedMessage }}</div>` }; ``` 值得注意的是，由于设计上的考量，默认情况下这种关联不具备双向同步特性——即修改接收端不会影响源位置的状态变化[^2]^[]^。不过对于复杂场景需求而言，我们依然能够借助 Vuex store 或者 reactive wrapper 来构建更灵活的行为模式[^4]. --- ### 示例代码展示 下面是一段完整的例子演示如何利用 global properties 结合 provide/inject 功能实现全局状态管理模式: ```javascript // main.js import { createApp } from 'vue'; const app = createApp({}); app.config.globalProperties.$user = { name: "Nick", role: "Customer" }; export default app; // App.vue (Parent Component) <template> <Child /> </template> <script> import Child from './components/Child.vue'; export default { components: { Child }, provide() { return { user: this.$user, }; }, }; </script> // Child.vue (Descendant Component) <template> <p>User Name: {{ userName }} | Role: {{ userRole }}</p> </template> <script> export default { inject: ['user'], computed: { userName() { return this.user.name; }, userRole() { return this.user.role; }, }, }; </script> ``` 上述案例展示了从根级别配置全局用户信息并通过标准途径分发至特定区域显示的过程. ---