Vue3如何使readonly对象仅允许修改指定键（如target）？

有两种实用的方法可以实现你要的效果，让readonly对象除指定键外保持只读：

方法一：直接修改原reactive对象 #

因为readonly()返回的是原reactive对象的只读代理视图，原对象的修改会同步到readonly对象中。你可以直接修改原对象的指定属性，readonly对象的对应值会自动更新：

import { reactive, readonly } from 'vue'

const obj = reactive({
  name: 'example',
  target: 'DOM',
})

const readonlyObj = readonly(obj)

// 直接修改原对象的target属性
obj.target = 'Modal'
console.log(readonlyObj.target) // 输出 'Modal'

// 尝试修改readonlyObj的其他属性依然会被拦截
readonlyObj.name = 'test' // 控制台抛出警告，修改无效

方法二：自定义Proxy包装对象 #

如果需要对外暴露一个统一的对象，让调用者可以直接修改指定属性（无需感知原对象），可以用Proxy包装readonly对象，拦截set操作，只允许修改指定键：

import { reactive, readonly } from 'vue'

const obj = reactive({
  name: 'example',
  target: 'DOM',
})

// 指定允许修改的键列表
const writableKeys = ['target']
const readonlyObj = new Proxy(readonly(obj), {
  set(_, key, value) {
    if (writableKeys.includes(key)) {
      // 直接修改原reactive对象的对应属性
      obj[key] = value
      return true
    }
    console.warn(`属性 "${key}" 为只读，无法修改`)
    return false
  }
})

// 现在可以直接修改readonlyObj.target
readonlyObj.target = 'Modal'
console.log(readonlyObj.target) // 输出 'Modal'

// 修改其他属性会被拦截并提示
readonlyObj.name = 'new example' // 控制台警告，修改无效

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