vue3 响应式 API：readonly() 与 shallowReadonly()

原创

已于 2024-09-06 17:21:52 修改 · 516 阅读

CC 4.0 BY-SA版权

文章标签：

于 2024-09-06 16:49:54 首次发布

`readonly()`

readonly()是一个用于创建只读代理对象的函数。它接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。

function readonly<T extends object>(
  target: T
): DeepReadonly<UnwrapNestedRefs<T>>

以下是对这个函数签名的详细解释：

参数target: T：
- target是要被转换为只读对象的输入对象。
- T extends object表示类型参数T必须是一个对象类型，这确保了输入的target只能是对象而不是基本数据类型（如数字、字符串等）。
返回值DeepReadonly<UnwrapNestedRefs<T>>：这个函数返回一个深度只读的、解包了嵌套响应式对象的新对象。
- DeepReadonly是一个工具类型，它使传入的类型变为深度只读类型，即对象的所有嵌套属性也都是只读的。
- UnwrapNestedRefs是一个工具类型，它用于解包嵌套的响应式对象（由ref或reactive创建的对象），将嵌套的响应式对象转换为普通的 JavaScript 对象。