深入理解 Vue 3 中的 readOnly 与 shallowReadOnly

在 Vue 3 的响应式系统中，readOnly 和 shallowReadOnly 是两个非常实用的 API，它们可以帮助我们创建不可变的数据副本，从而保护数据不被意外修改。这两个 API 的名字已经暗示了它们的功能，但它们之间到底有什么区别呢？本文将通过具体的场景和代码示例，深入探讨这两个 API 的使用方法和特点。

一、场景引入：保护重要数据

在实际开发中，我们经常会遇到需要保护某些重要数据的场景。例如，在一个电商系统中，商品的价格和库存信息是非常重要的数据，这些数据一旦被错误修改，可能会导致严重的后果，如用户零元购或库存数据混乱。为了避免这种情况，我们需要确保这些数据只能由特定的逻辑修改，而其他地方只能读取这些数据。

另一个场景是全局状态管理。在大型应用中，我们可能会使用 Vuex 或其他状态管理库来管理全局状态。有些状态是全局共享的，但我们不希望这些状态被随意修改，而是通过特定的逻辑来更新。在这种情况下，readOnly 和 shallowReadOnly 可以帮助我们实现这种保护机制。

二、readOnly：创建深只读副本

（一）基本概念

readOnly 是一个用于创建深只读副本的 API。它接受一个响应式对象或引用作为参数，并返回一个新的只读对象。这个只读对象的所有属性都是只读的，无论是第一层还是深层嵌套的属性。

（二）使用方法

我们先来看一个简单的例子。假设我们有一个响应式对象 sum，我们希望创建一个只读的副本 sum2，以保护 sum 的值不被意外修改。

import { ref, readOnly } from 'vue';

const sum = ref(0);

const sum2 = readOnly(sum);

console.log(sum.value); // 0
console.log(sum2.value); // 0

sum.value = 10;
console.log(sum.value); // 10
console.log(sum2.value); // 10

// 尝试修改只读副本
sum2.value = 20; // 会报错：TypeError: Assignment to constant variable.

在这个例子中，sum2 是 sum 的只读副本。我们可以通过 sum 修改值，但不能通过 sum2 修改值。sum2 会保持与 sum 的关联关系，sum 的值发生变化时，sum2 的值也会相应变化。

（三）保护对象数据

readOnly 也可以用于保护对象数据。假设我们有一个响应式对象 car，我们希望创建一个只读的副本 car2，以保护 car 的数据不被意外修改。

import { reactive, readOnly } from 'vue';

const car = reactive({
  brand: '奔驰',
  options: {
    color: '红色',
    price: 100
  }
});

const car2 = readOnly(car);

console.log(car.brand); // 奔驰
console.log(car2.brand); // 奔驰

car.brand = '宝马';
console.log(car.brand); // 宝马
console.log(car2.brand); // 宝马

// 尝试修改只读副本
car2.brand = '奥迪'; // 会报错：TypeError: Cannot assign to read only property 'brand' of object

在这个例子中，car2 是 car 的只读副本。我们可以通过 car 修改数据，但不能通过 car2 修改数据。car2 会保持与 car 的关联关系，car 的数据发生变化时，car2 的数据也会相应变化。

三、shallowReadOnly：创建浅只读副本

（一）基本概念

shallowReadOnly 是一个用于创建浅只读副本的 API。它接受一个响应式对象或引用作为参数，并返回一个新的只读对象。这个只读对象的第一层属性是只读的，但深层嵌套的属性不是只读的。

（二）使用方法

我们再来看一个例子。假设我们有一个响应式对象 car，我们希望创建一个浅只读副本 car3，以保护 car 的第一层属性不被意外修改。

import { reactive, shallowReadOnly } from 'vue';

const car = reactive({
  brand: '奔驰',
  options: {
    color: '红色',
    price: 100
  }
});

const car3 = shallowReadOnly(car);

console.log(car.brand); // 奔驰
console.log(car3.brand); // 奔驰

car.brand = '宝马';
console.log(car.brand); // 宝马
console.log(car3.brand); // 宝马

// 尝试修改只读副本的第一层属性
car3.brand = '奥迪'; // 会报错：TypeError: Cannot assign to read only property 'brand' of object

// 修改只读副本的深层属性
car3.options.color = '绿色';
console.log(car.options.color); // 绿色
console.log(car3.options.color); // 绿色

在这个例子中，car3 是 car 的浅只读副本。我们可以通过 car 修改数据，但不能通过 car3 修改第一层属性。car3 的深层属性（如 options.color）不是只读的，可以正常修改。

四、readOnly 与 shallowReadOnly 的区别

（一）深度限制

• readOnly：创建的是深只读副本，所有层次的属性都是只读的。

• shallowReadOnly：创建的是浅只读副本，只有第一层属性是只读的，深层属性不是只读的。

（二）适用场景

• readOnly：适用于需要保护整个数据结构不被修改的场景。

• shallowReadOnly：适用于只需要保护第一层属性不被修改的场景，深层属性可以正常修改。

五、实际应用案例

（一）保护全局状态

假设我们在一个大型应用中使用 Vuex 管理全局状态，我们希望保护某些状态不被随意修改。我们可以使用 readOnly 或 shallowReadOnly 来实现这一点。

import { reactive, readOnly, shallowReadOnly } from 'vue';

const state = reactive({
  user: {
    name: '张三',
    age: 28
  },
  settings: {
    theme: 'dark',
    notifications: true
  }
});

const protectedState = readOnly(state);
const shallowProtectedState = shallowReadOnly(state);

// 修改全局状态
state.user.name = '李四';
state.settings.theme = 'light';

// 尝试修改只读副本
protectedState.user.name = '王五'; // 会报错
shallowProtectedState.user.name = '赵六'; // 会报错
shallowProtectedState.settings.theme = 'dark'; // 不会报错

在这个例子中，protectedState 是 state 的深只读副本，所有属性都是只读的。shallowProtectedState 是 state 的浅只读副本，只有第一层属性是只读的，深层属性可以正常修改。

（二）保护重要数据

假设我们在一个电商系统中管理商品信息，我们希望保护商品的价格和库存信息不被随意修改。我们可以使用 readOnly 或 shallowReadOnly 来实现这一点。

import { reactive, readOnly, shallowReadOnly } from 'vue';

const product = reactive({
  name: 'iPhone 13',
  price: 5999,
  stock: 100,
  details: {
    color: '黑色',
    capacity: '128GB'
  }
});

const protectedProduct = readOnly(product);
const shallowProtectedProduct = shallowReadOnly(product);

// 修改商品信息
product.price = 6999;
product.details.color = '白色';

// 尝试修改只读副本
protectedProduct.price = 7999; // 会报错
shallowProtectedProduct.price = 8999; // 会报错
shallowProtectedProduct.details.color = '红色'; // 不会报错

在这个例子中，protectedProduct 是 product 的深只读副本，所有属性都是只读的。shallowProtectedProduct 是 product 的浅只读副本，只有第一层属性是只读的，深层属性可以正常修改。

六、总结

readOnly 和 shallowReadOnly 是 Vue 3 中非常有用的 API，它们可以帮助我们创建不可变的数据副本，从而保护数据不被意外修改。readOnly 创建的是深只读副本，所有层次的属性都是只读的；而 shallowReadOnly 创建的是浅只读副本，只有第一层属性是只读的，深层属性可以正常修改。