vue里的provide和inject

1. 核心概念‌

• ‌provide (提供)
  在父组件/祖先组件中使用，定义要传递给后代的数据（可以是对象、函数、响应式数据等）。
• inject (注入)
  在后代组件中使用，接收祖先组件通过 provide 提供的数据。

2. 基本用法

• 父组件（提供数据）

• // Vue 3 示例
  import { provide } from 'vue'
  provide('user', '111')
  

3. 关键特性

• 响应性处理‌
  默认情况下，provide 的数据不具备响应性。若需响应式传递，需显式使用 computed 或 Vue 3 的 ref/reactive

• 多层级穿透‌
  数据可跨任意层级传递，无需逐层 props。

• ‌Symbol 避免命名冲突

  推荐用 Symbol 作为 key（大型项目适用）

  // config.ts 配置
  export const USER_KEY = Symbol()
  

  // 父组件
  import { provide } from 'vue'
  import { USER_KEY } from '@/config'
  provide(USER_KEY, '111')
  

  // 子组件
  import { inject } from 'vue'
  import { USER_KEY } from '@/config'
  const user = inject(USER_KEY, 'Default Name')
  console.log(user) // 111
  

  4. 适用场景

  • 主题/配置共享‌（如全局样式、用户权限）
  • 深层嵌套表单/表格组件‌（避免冗长的 props 链）
  • 插件/库开发‌（如 Vue Router 的 $router 注入）

  5. 注意事项

  • ‌非响应式警告‌：直接传递普通对象时，修改不会触发视图更新。
  • ‌慎用替代 Vuex/Pinia‌：复杂状态管理仍需专用工具。
  • ‌明确依赖关系‌：过度使用可能导致组件间耦合度增高。