剖析Vue3的只读代理：readonly、isReadonly、shallowReadonly

前端

2024-01-10 23:12:32

浅析readonly、isReadonly、shallowReadonly

Vue3中的只读代理包括readonly、isReadonly和shallowReadonly，它们可以帮助您创建只读数据，从而提高性能并防止意外修改。

readonly：
使用readonly创建的代理对象是完全只读的，任何修改操作都会抛出错误。readonly可以用于保护重要的数据，防止意外修改导致的程序错误。

isReadonly：
isReadonly是一个布尔值，用于判断一个对象是否只读。您可以使用isReadonly来检查对象是否只读，以便决定是否允许对其进行修改。

shallowReadonly：
shallowReadonly创建的代理对象是浅只读的，这意味着对象本身是只读的，但其属性可能不是只读的。shallowReadonly可以用于创建只读对象，同时允许修改其属性。

使用示例

readonly：

const user = Vue.observable({
  name: 'John Doe',
  age: 30
});

const readonlyUser = Vue.readonly(user);

readonlyUser.name = 'Jane Doe'; // 报错：Cannot assign to read only property 'name' of object '#<Object>'

console.log(readonlyUser.age); // 30

isReadonly：

const user = Vue.observable({
  name: 'John Doe',
  age: 30
});

const readonlyUser = Vue.readonly(user);

console.log(Vue.isReadonly(readonlyUser)); // true

console.log(Vue.isReadonly(user)); // false

shallowReadonly：

const user = Vue.observable({
  name: {
    first: 'John',
    last: 'Doe'
  },
  age: 30
});

const shallowReadonlyUser = Vue.shallowReadonly(user);

shallowReadonlyUser.name.first = 'Jane'; // 修改成功

console.log(shallowReadonlyUser.name.first); // Jane

shallowReadonlyUser.name = {
  first: 'John',
  last: 'Smith'
}; // 报错：Cannot assign to read only property 'name' of object '#<Object>'

console.log(shallowReadonlyUser.age); // 30