Vue3 readonly 怎么防止配置数据被误改？

Question

仓乃文 · Accepted Answer

团队协作中全局配置、权限数据等不应被随意修改，readonly 将响应式对象变为只读，任何修改操作都会在开发环境下发出警告，防止数据被意外篡改。

保护全局配置：
```javascript
import { reactive, readonly } from "vue";
const config = reactive({ theme: "dark", lang: "zh-CN" });
const lockedConfig = readonly(config);
lockedConfig.theme = "light";  // 开发环境警告，修改不生效
```

跨组件传递只读数据：
```javascript
import { readonly } from "vue";
export function useConfig() {
  const config = reactive({ apiUrl: "...", timeout: 5000 });
  return { config: readonly(config) };  // 外部只读，内部可改
}
```

shallowReadonly 只保护根级：
```javascript
import { shallowReadonly } from "vue";
const state = shallowReadonly({
  name: "Tom",
  address: { city: "Beijing" }
});
state.name = "Jerry";  // 警告，不允许
state.address.city = "Shanghai";  // 无警告，嵌套属性可改
```

补充说明：
- readonly 是深度只读，嵌套对象也不可修改
- shallowReadonly 只有根级属性只读，嵌套对象仍可修改
- 只读代理与原始对象同步，修改原始对象会反映到只读代理
- 生产环境下不会发出警告，但修改仍然不生效
- 适合 provide 传递数据时防止子组件误改