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

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 对象。