vueJs中readonly与shallowReadonly函数的使用比较

最新推荐文章于 2025-07-30 23:37:37 发布

原创最新推荐文章于 2025-07-30 23:37:37 发布 · 340 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #ecmascript #前端框架

文章介绍了VueJs中的readonly和shallowReadonly函数，它们用于将响应式数据转换为只读，阻止不必要的修改。readonly是深度只读，整个对象及其嵌套都不可修改，而shallowReadonly是浅层只读，仅保护第一层属性，允许修改深层嵌套的对象。这两个函数在保护源数据不被意外修改时非常有用。

readonly()函数

让一个响应式数据变为只读的,接收一个响应式数据,经过readonly加工处理一下,那么新赋值的数据都不允许修改

接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理

页面没有更新有两种情况

[1]. 数据修改了,但数据不是响应式,vue监测不到

[2]. 数据压根就没有更改

const original = reactive({ count: 0 })

const copy = readonly(original)

// 更改源属性会触发其依赖的侦听器
original.count++

// 更改该只读副本将会失败，并会得到一个警告,页面数据不会更新
copy.count++ // warning!

shallowReadonly()函数

接收一个响应式数据,经过shallowreadonly的处理,变成一个只读的,只考虑对象的第一层数据,不可以修改,但是第一层嵌套里的深层数据却支持修改

让一个响应式数据变为只读能力(浅只读)

应用场景: 不希望数据被修改,当数据是从别的地方取过来,不希望影响源数据

const state = shallowReadonly({
  foo: 1,
  nested: {
    bar: 2
  }
})

// 更改状态自身的属性会失败,不可以修改
state.foo++

// ...但可以更改下层嵌套对象
isReadonly(state.nested) // false

// 这是可以通过的
state.nested.bar++