readonly与shallowReadonly

Vue 3 readonly 与 shallowReadonly

在 Vue 3 的 Composition API 中，readonly 和 shallowReadonly 是两个用于创建只读数据的函数。它们可以用于将对象或数组包装成只读的响应式数据，以防止对其进行修改。

readonly

readonly 函数用于创建一个只读的响应式代理对象，它会对包装对象进行深层递归地响应式处理，以便监听其属性的变化，并阻止对其进行修改。这意味着你可以读取包装对象的属性，但无法修改它们。

下面是 readonly 的使用方法：

代码语言：javascript复制

import { readonly } from 'vue';

const data = readonly({
  name: 'John',
  age: 25,
});

// 读取属性
console.log(data.name); // 输出：'John'

// 尝试修改属性（不会生效）
data.name = 'Alice';

在上面的示例中，我们使用 readonly 创建了一个只读的响应式代理对象 data。我们可以读取 data 的属性值，但无法修改它们。

shallowReadonly

shallowReadonly 函数用于创建一个只读的浅层响应式代理对象，它会对包装对象的第一层属性进行响应式处理，但不会递归处理嵌套的属性。这意味着你可以读取包装对象的第一层属性，但无法修改它们，同时嵌套的属性仍然可以被修改。

下面是 shallowReadonly 的使用方法：

代码语言：javascript复制

import { shallowReadonly } from 'vue';

const data = shallowReadonly({
  name: 'John',
  age: 25,
  hobbies: ['reading', 'playing'],
});

// 读取第一层属性
console.log(data.name); // 输出：'John'

// 尝试修改第一层属性（不会生效）
data.name = 'Alice';

// 修改嵌套属性（生效）
data.hobbies.push('running');

在上面的示例中，我们使用 shallowReadonly 创建了一个只读的浅层响应式代理对象 data。我们可以读取 data 的第一层属性，但无法修改它们。然而，我们仍然可以修改 data 的嵌套属性，因为 shallowReadonly 只对第一层属性进行只读处理。

注意事项

使用 readonly 和 shallowReadonly 时，需要注意以下几点：

使用 readonly 或 shallowReadonly 包装的数据是只读的，无法对其进行修改。
对于 readonly，它会对包装对象进行深层递归的响应式处理，而对于 shallowReadonly，它只会对第一层属性进行响应式处理。
readonly 和 shallowReadonly 返回的是一个代理对象，对原始数据的修改仍然会生效。

0 人点赞