Vue/Nuxt提供只读对象失效，求子组件只读响应式对象方案

问题原因 #

你使用的@nuxtjs/composition-api是Vue 2的Composition API兼容层，它的readonly实现和Vue 3原生版本存在差异：

• Vue 2基于Object.defineProperty的响应式系统，对readonly的拦截能力有限，生产环境下不会强制阻止修改，仅在开发模式给出警告；
• 当readonly包裹的ref值为对象时，默认仅拦截ref.value的整体替换操作，对象内部属性的修改需要额外处理。

解决方案 #

1. 开发模式下验证警告 #

运行npm run dev启动Nuxt开发环境，此时@nuxtjs/composition-api的readonly会对非法修改抛出控制台警告，虽然不会完全阻止修改，但能提示开发者避免误操作。生产环境出于性能考虑会移除这类警告，修改可能会生效。

2. 结合Object.freeze实现深层只读 #

如果需要彻底阻止子组件修改（包括对象内部属性），在创建ref时冻结目标对象：

// 父组件
const test = ref(Object.freeze({ test: 'test' }))
provide('test', readonly(test))

Object.freeze是浅冻结，若对象存在嵌套属性，可使用深层冻结工具（如lodash的_.deepFreeze）处理。

3. 自定义只读访问器封装 #

手动封装仅提供读取能力的对象，彻底屏蔽修改入口：

// 父组件
const test = ref({ test: 'test' })
provide('test', {
  get value() {
    return readonly(test.value)
  }
})

// 子组件
const test = inject('test')
console.log(test.value.test) // 正常读取
test.value = 'changed!' // 报错（无setter）
test.value.test = 'changed' // 报错（返回的是readonly对象）

内容的提问来源于stack exchange，提问作者harunaga