本文主要是介绍shallowReadonly 和 readonly，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在 Vue 3 中，shallowReadonly 和 readonly 都是用于创建只读响应式对象的 API。这两者的主要区别在于它们的“深度”处理方式
readonly
创建一个深层次的只读响应式对象，所有嵌套的属性都会变成只读的，且会被递归地转换为只读响应式对象。这意味着你不能直接修改这个对象或它的任何嵌套属性的值，如果尝试修改会在开发环境下抛出警告。
import { reactive, readonly } from 'vue';const state = reactive({user: {name: 'Alice',age: 25}
});const readonlyState = readonly(state);// 访问属性
console.log(readonlyState.user.name); // 输出: Alice// 尝试修改顶层属性（失败）
readonlyState.user = { name: 'Bob', age: 30 }; // 警告: 修改失败// 尝试修改嵌套属性（失败）
readonlyState.user.name = 'Bob'; // 警告: 修改失败
在这个示例中，readonlyState 是一个通过 readonly 创建的深层次只读对象。你不能修改 readonlyState 的任何属性，包括嵌套属性。
shallowReadonly
shallowReadonly 创建一个浅层次的只读响应对象，用于将一个对象的顶层属性设为只读，而不会递归地处理嵌套属性。嵌套的属性仍然是可变的。
import { shallowReadonly } from 'vue';const state = {user: {name: 'Alice',age: 25}
};const shallowReadonlyState = shallowReadonly(state);// 访问属性
console.log(shallowReadonlyState.user.name); // 输出: Alice// 尝试修改顶层属性（失败）
shallowReadonlyState.user = { name: 'Bob', age: 30 }; // 警告: 修改失败// 尝试修改嵌套属性（成功）
shallowReadonlyState.user.name = 'Bob'; // 成功修改
在这个示例中，shallowReadonlyState 是一个通过 shallowReadonly 创建的浅层次只读对象。顶层属性 user 是只读的，不能被重新赋值，但是嵌套属性 user.name 仍然是可变的，可以被修改。
总结
readonly：深层次的只读，递归地将对象及其所有嵌套属性设为只读。shallowReadonly：浅层次的只读，只将对象的顶层属性设为只读，嵌套属性仍然可变。- 适用场景：
readonly：适用于你希望整个对象及其所有嵌套属性都不被修改的场景。常用于防止深层数据结构中的任何属性被意外修改。例如：全局配置对象不允许修改、vuex中 state 的不允许直接修改(但是可以在vuex中修改)、接口返回数据不允许修改shallowReadonly：适用于你只希望保护对象的顶层属性不被修改，而允许嵌套属性仍然可以修改的场景。常用于需要限制对象的结构不变，但允许部分数据动态变化的场景。例如：组件 Props 本身不应被替换，但子对象中的某些属性可以在组件内部进行修改。保护对象的外层结构不被修改，同时允许内部的嵌套对象根据业务需求进行动态修改。
这篇关于shallowReadonly 和 readonly的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
