在 vue 3 中，应先用 readonly 包裹响应式数据再 provide，以防止后代组件意外修改；配合 computed 可实现派生只读状态；对大型对象可选用 shallowreadonly 控制只读粒度。
在 Vue 3 中，依赖注入（provide/inject）配合 readonly 是保护祖先提供状态不被后代意外修改的常用组合。它既保留响应式更新能力，又从语义和运行时两个层面约束写操作。
为什么需要 readonly + provide？
直接 provide 一个响应式对象（如 ref 或 reactive），后代组件通过 inject 拿到的是原始响应式引用——这意味着它可以自由修改值，破坏单向数据流原则。尤其在深层嵌套或多人协作场景下，误改 inject 来的数据极易引发难以追踪的副作用。
readonly 的作用就是给这个“注入通道”加一道只读屏障：开发时赋值报警告，生产时静默忽略，且嵌套属性也受保护（深度只读）。
正确配合方式：先 readonly，再 provide
关键点是：必须对要提供的响应式数据调用 readonly()，再传给 provide。不能在 inject 后再包装，否则失去保护意义。
- 提供方（祖先组件）：用
readonly()包裹后提供 - 注入方（后代组件）：
inject拿到的就是只读代理，任何赋值都会触发警告
示例：
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
// 祖先组件（如 App.vue）
import { ref, provide, readonly } from 'vue'
const userInfo = ref({
name: '李四',
role: 'editor',
settings: { theme: 'dark', notifications: true }
})
// ✅ 正确：先转为只读，再提供
provide('userInfo', readonly(userInfo))
// ❌ 错误：直接提供原始 ref，后代可随意修改
// provide('userInfo', userInfo)
配合 computed 实现派生只读状态
当注入的数据需经过处理（如过滤、映射、格式化）再暴露给后代时，推荐用 computed 而非 readonly。因为 computed 天然只读、自动追踪依赖、避免深拷贝开销。
例如，只暴露用户姓名和角色，隐藏敏感字段：
// 祖先组件
import { ref, provide, computed } from 'vue'
const fullUser = ref({ name: '王五', email: 'w5@example.com', token: 'xxx' })
// 提供一个只读的精简视图
provide('publicUser', computed(() => ({
name: fullUser.value.name,
role: fullUser.value.role // 假设 role 在 fullUser 中存在
}))
后代组件 inject('publicUser') 拿到的是计算属性对象，无法赋值，且随 fullUser 自动更新。
进阶：结合 shallowReadonly 控制只读粒度
若注入的是大型对象（如配置列表），且仅需防止顶层属性被增删/重赋值，但允许内部数组项动态更新（如 push、splice），可用 shallowReadonly 替代 readonly。
它只冻结第一层，性能更好，适用于“结构稳定、内容可变”的场景：
const configList = reactive([
{ id: 1, enabled: true },
{ id: 2, enabled: false }
])
// 只禁止对 configList 本身重新赋值或 .length 修改，但允许 configList[0].enabled = true
provide('configs', shallowReadonly(configList))
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
