vue readonly 与shallowReadonly

readonly 和 shallowReadonly 是 Vue 3 中用于创建只读数据的两个函数，它们在只读的深度和性能上有所不同，适用于不同的场景。

基本概念

• ‌readonly‌：创建一个深度只读的代理对象。这意味着对象及其所有嵌套属性都变为只读，任何尝试修改这些属性的操作都会被阻止，并在严格模式下抛出警告。例如，如果有一个嵌套对象 info，readonly 会确保 info.age 也无法被修改。‌
• ‌shallowReadonly‌：创建一个浅只读的代理对象。只有对象的顶层属性是只读的，而嵌套对象保持可写性。例如，shallowReadonly 会阻止修改顶层属性 name，但允许修改嵌套属性 info.age。‌

主要区别

1. ‌只读深度‌：
   • readonly 是深度只读，递归处理所有嵌套属性。‌
   • shallowReadonly 只处理顶层属性，嵌套对象不受影响。‌
2. ‌性能影响‌：
   • readonly 由于需要遍历整个对象结构，在处理大型嵌套数据时性能开销较大。‌
   • shallowReadonly 只关注顶层属性，性能更高，尤其适合复杂嵌套结构。‌
3. ‌使用场景‌：
   • readonly 适用于需要严格保护数据完整性的场景，如配置数据或敏感信息（如订单金额），防止任何意外修改。‌
   • shallowReadonly 适用于只需保护顶层属性、同时允许嵌套数据修改的场景，或对性能要求较高的情况（如大型数据列表）。‌

// 使用 readonly
const original = reactive({ name: 'John', info: { age: 30 } });
const deepReadonly = readonly(original);
deepReadonly.name = 'Jane'; // 失败，警告并忽略
deepReadonly.info.age = 31; // 失败，整个对象被锁定

// 使用 shallowReadonly
const shallowReadonlyObj = shallowReadonly(original);
shallowReadonlyObj.name = 'Jane'; // 失败，顶层属性被锁定
shallowReadonlyObj.info.age = 31; // 成功，嵌套属性可修改

选择建议

• 如果数据结构简单或需要全面保护，优先使用 readonly。
• 如果数据嵌套复杂或性能关键，且只需保护顶层属性，shallowReadonly 更高效。‌

在实际开发中，根据业务需求灵活选择，能平衡数据安全性和性能。