城乡建设网站首页,默认缩略图 wordpress,哈尔滨招标网官网,做电子元器件的网站readonly()
readonly()是一个用于创建只读代理对象的函数。它接受一个对象 (不论是响应式还是普通的) 或是一个 ref#xff0c;返回一个原值的只读代理。
类型
function readonlyT extends object(target: T
): DeepReadonlyUnwrapNestedRefsT以下…readonly()
readonly()是一个用于创建只读代理对象的函数。它接受一个对象 (不论是响应式还是普通的) 或是一个 ref返回一个原值的只读代理。
类型
function readonlyT extends object(target: T
): DeepReadonlyUnwrapNestedRefsT以下是对这个函数签名的详细解释
参数target: T target是要被转换为只读对象的输入对象。T extends object表示类型参数T必须是一个对象类型这确保了输入的target只能是对象而不是基本数据类型如数字、字符串等。 返回值DeepReadonlyUnwrapNestedRefsT这个函数返回一个深度只读的、解包了嵌套响应式对象的新对象。 DeepReadonly是一个工具类型它使传入的类型变为深度只读类型即对象的所有嵌套属性也都是只读的。UnwrapNestedRefs是一个工具类型它用于解包嵌套的响应式对象由ref或reactive创建的对象将嵌套的响应式对象转换为普通的 JavaScript 对象。
示例
readonly()创建的只读代理是深层的对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive() 相同但解包得到的值是只读的。
对象的所有嵌套属性都将变为只读。任何尝试修改这个对象的操作都会被阻止在开发模式下还会在控制台中发出警告。
import { readonly } from vue;
let readonlyObj readonly({message: hello,info: {name: readonly,back: Proxy对象}
})// 报错无法为“message”赋值因为它是只读属性。
readonlyObj.message hello
// 无法为“name”赋值因为它是只读属性。
readonlyObj.info.name readonly!如果原始对象是响应式的那么通过readonly创建的对象也会保持响应性原始对象的属性发生变化只读对象也会反映这些变化。
import { reactive, readonly } from vue;let reactiveObj reactive({message: hello
})let readonlyObj readonly(reactiveObj)
console.log(reactiveObj, readonlyObj)// 修改原始对象reactiveObj
reactiveObj.message hello, world!
console.log(reactiveObj, readonlyObj)查看控制台打印结果 只读对象readonlyObj跟随原始对象reactiveObj的变化而变化。
应用场景
创建不可变的状态快照。保护全局状态或配置不被修改。 shallowReadonly()
shallowReadonly() 是 readonly() 的浅层作用形式是一个用于创建浅层只读代理对象的函数。
shallowReadonly接受一个对象作为参数并返回一个新的代理对象。 shallowReadonly创建的对象是浅层只读的
只将对象的顶层属性设置为只读对象内部的嵌套属性可以被修改。适用于只需保护对象顶层属性的场景。
import { reactive, shallowReadonly } from vue;let readonlyObj shallowReadonly({message: hello,info: {name: readonly,back: Proxy对象}
})// 无法为“message”赋值因为它是只读属性。
readonlyObj.message hello, world!
// name是嵌套属性不是readonlyObj的第一层属性因此name可以被修改
readonlyObj.info.name readonly!!!如果原始对象是响应式的那么通过shallowReadonly创建的对象也会保持响应性。
