provide 和 inject 最佳实践

provide 和 inject 是 Vue 提供的一对 API，用于实现祖先组件向子孙组件跨层级传递数据，而不需要通过 props 逐层传递。

最佳实践

为注入值提供默认值：

const value = inject('someKey', 'default value')

使用 Symbol 作为 key 避免命名冲突：

// keys.js
export const USER_KEY = Symbol(‘user’)

// 提供者组件
provide(USER_KEY, userData)

// 注入者组件
const user = inject(USER_KEY)

考虑响应性：

确保提供的值是响应式的（使用 ref 或 reactive）

如果需要在注入组件中修改提供的值，考虑提供修改函数而不是直接修改

类型安全（TypeScript）：

interface User {
name: string
age: number
}

const user = inject(‘user’)

避免滥用 - 只在真正需要跨多层组件传递数据时使用，大多数情况下 props 和 emit 是更好的选择。

##注意事项
provide 和 inject 绑定不是响应式的，除非你显式提供响应式对象

主要用于开发高阶插件/组件库，在普通应用代码中应谨慎使用

会使组件之间的耦合度变高，降低组件的可复用性