Vue 3的`reactive`与`readonly`：如何创建只读的响应式对象？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 3 的 `reactive` 与 `readonly`：创建只读的响应式对象

大家好！今天我们来深入探讨 Vue 3 中两个非常重要的 API：reactive 和 readonly。它们是构建响应式系统的核心，而 readonly 则提供了一种创建只读响应式对象的方式，这在数据保护和状态管理方面至关重要。

1. 响应式基础：`reactive` 的作用

在 Vue 3 中，reactive 函数用于创建一个响应式对象。这意味着当对象中的属性发生变化时，所有依赖于该属性的视图或计算属性都会自动更新。这使得我们可以构建动态和交互性强的用户界面。

基本用法:

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello Vue!'
});

// 访问属性
console.log(state.count); // 输出: 0

// 修改属性
state.count++;

// 当 count 发生变化时，依赖它的视图会自动更新

在这个例子中，state 对象被转换为一个响应式对象。任何使用 state.count 或 state.message 的组件都会在这些属性发生变化时重新渲染。

深入理解响应式原理:

reactive 的底层实现依赖于 JavaScript 的 Proxy 对象。Proxy 允许我们拦截对对象的操作，例如读取属性、设置属性等。当使用 reactive 创建响应式对象时，Vue 3 会创建一个 Proxy 对象来包装原始对象。

读取属性 (Get): 当我们访问 state.count 时，Proxy 会拦截这个操作，并建立 state.count 和当前正在执行的组件或计算属性之间的依赖关系。
设置属性 (Set): 当我们修改 state.count 时，Proxy 会拦截这个操作，通知所有依赖于 state.count 的组件或计算属性进行更新。

嵌套对象和数组:

reactive 可以处理嵌套的对象和数组。如果一个对象的属性本身也是一个对象或数组，那么 reactive 会递归地将它们转换为响应式对象。

import { reactive } from 'vue';

const state = reactive({
  user: {
    name: 'Alice',
    age: 30
  },
  hobbies: ['reading', 'hiking']
});

// 修改嵌套对象的属性
state.user.age++;

// 添加数组元素
state.hobbies.push('coding');

// 视图会自动更新以反映这些变化

需要注意的是，只有通过响应式对象访问和修改的属性才能触发响应式更新。如果直接修改原始对象，Vue 3 将无法追踪到这些变化。

注意事项:

替换对象: 如果直接用一个全新的对象替换 reactive 对象，响应式连接将会丢失。
```
import { reactive } from 'vue';

let state = reactive({ count: 0 });
// 错误的用法，会丢失响应性
state = { count: 1 };
```
正确的做法是更新现有对象的属性，而不是替换整个对象。如果必须替换，可以考虑使用 ref。

添加新属性: 在 reactive 对象创建后，动态添加的属性默认不是响应式的。可以使用 Vue.set 或 reactive(Object.assign({}, state, { newProp: value })) 来添加响应式属性。不过，更好的方式是在创建 reactive 对象时就定义好所有需要响应式的属性。

import { reactive, set } from 'vue';

const state = reactive({ count: 0 });

// 错误的用法，newProp 不是响应式的
state.newProp = 'hello';

// 正确的用法：使用 set
set(state, 'newProp', 'hello');

// 或者使用 Object.assign, 重新生成一个 reactive 对象。
// state = reactive(Object.assign({}, state, {newProp: 'hello'}));

解构赋值: 从 reactive 对象解构出来的属性，会失去响应性。
```
import { reactive } from 'vue';

const state = reactive({ count: 0 });
const { count } = state; // count 不再是响应式的

// 修改 count 不会触发视图更新
count++;
```
如果需要在模板中使用响应式属性，应该直接使用 state.count。如果需要在组件内部使用解构赋值，可以使用 toRefs 将响应式对象的属性转换为 ref 对象。

2. 数据保护：`readonly` 的作用

readonly 函数用于创建一个只读的响应式对象。这意味着我们仍然可以像使用 reactive 对象一样访问它的属性，但是不能修改它的属性。任何尝试修改只读对象的属性都会导致警告。

基本用法:

import { reactive, readonly } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello Vue!'
});

const readonlyState = readonly(state);

// 访问属性
console.log(readonlyState.count); // 输出: 0

// 尝试修改属性 (会导致警告)
// readonlyState.count++; // TypeError: Cannot set property count of #<Object> which has only a getter

在这个例子中，readonlyState 是 state 的一个只读代理。我们可以读取 readonlyState.count 的值，但是尝试修改它会抛出一个错误。

readonly 的应用场景:

状态管理: 在复杂的应用程序中，我们通常需要一个中心化的状态管理系统。readonly 可以用来保护状态，防止组件意外地修改状态。例如，在 Vuex 中，我们可以使用 readonly 来包装 state 对象，确保只有 mutations 可以修改状态。
组件通信: 当一个组件需要向子组件传递数据时，可以使用 readonly 来防止子组件修改父组件的数据。这可以提高代码的可维护性和可预测性。
数据保护: readonly 可以用来保护敏感数据，防止意外的修改。例如，我们可以将 API 返回的数据转换为只读对象，确保数据不会被意外地修改。

深度只读:

readonly 默认是深度只读的。这意味着如果一个只读对象的属性本身也是一个对象或数组，那么该属性也会被转换为只读对象。

import { reactive, readonly } from 'vue';

const state = reactive({
  user: {
    name: 'Alice',
    age: 30
  },
  hobbies: ['reading', 'hiking']
});

const readonlyState = readonly(state);

// 尝试修改嵌套对象的属性 (会导致警告)
// readonlyState.user.age++; // TypeError: Cannot set property age of #<Object> which has only a getter

// 尝试修改数组元素 (会导致警告)
// readonlyState.hobbies.push('coding'); // TypeError: Cannot set property '1' of #<Object> which has only a getter

shallowReadonly:

Vue 3 也提供了 shallowReadonly 函数，用于创建浅只读对象。这意味着只有对象的第一层属性是只读的，而嵌套对象或数组仍然是可修改的。

import { reactive, shallowReadonly } from 'vue';

const state = reactive({
  user: {
    name: 'Alice',
    age: 30
  },
  hobbies: ['reading', 'hiking']
});

const shallowReadonlyState = shallowReadonly(state);

// 尝试修改顶层属性 (会导致警告)
// shallowReadonlyState.count++; // TypeError: Cannot set property count of #<Object> which has only a getter

// 修改嵌套对象的属性 (不会导致警告)
shallowReadonlyState.user.age++; // 有效

// 添加数组元素 (不会导致警告)
shallowReadonlyState.hobbies.push('coding'); // 有效

选择 readonly 还是 shallowReadonly:

如果需要完全保护对象及其所有嵌套属性，应该使用 readonly。
如果只需要保护对象的第一层属性，而允许修改嵌套属性，可以使用 shallowReadonly。这在性能方面可能更有效率，因为 shallowReadonly 不需要递归地遍历对象。

注意事项:

readonly 只是创建了一个只读的代理对象。如果直接修改原始对象，仍然可以修改它的属性。

import { reactive, readonly } from 'vue';

const state = reactive({ count: 0 });
const readonlyState = readonly(state);

// 修改原始对象
state.count++; // 有效

console.log(readonlyState.count); // 输出: 1 (readonlyState 会反映原始对象的改变)

因此，为了真正保护数据，应该尽量避免直接访问原始对象。

readonly 返回的也是一个响应式对象，这意味着如果原始对象发生变化，只读对象也会自动更新。

3. `reactive` 与 `readonly` 的区别

为了更清晰地理解 reactive 和 readonly 的区别，可以总结如下：

特性	`reactive`	`readonly`
目的	创建一个可变的响应式对象	创建一个只读的响应式对象
修改属性	允许	不允许 (会导致警告)
响应性	具有响应性，属性变化会触发视图更新	具有响应性，会反映原始对象的改变
深度	深度响应式，嵌套对象和数组也会被转换为响应式对象	深度只读，嵌套对象和数组也会被转换为只读对象
适用场景	需要修改状态的场景	需要保护状态，防止意外修改的场景

4. 结合 `reactive` 和 `readonly` 实现更灵活的状态管理

我们可以结合 reactive 和 readonly 来实现更灵活的状态管理。例如，我们可以创建一个内部可变的 reactive 对象，并将其转换为只读对象暴露给外部组件。

import { reactive, readonly } from 'vue';

// 内部状态
const internalState = reactive({
  count: 0,
  message: 'Hello Vue!'
});

// 暴露给外部的只读状态
const state = readonly(internalState);

// 修改内部状态
function increment() {
  internalState.count++;
}

// 外部组件只能读取状态，不能修改
export default {
  setup() {
    return {
      state,
      increment
    };
  },
  template: `
    <div>
      <p>Count: {{ state.count }}</p>
      <p>Message: {{ state.message }}</p>
      <button @click="increment">Increment</button>
    </div>
  `
};

在这个例子中，internalState 是一个内部的 reactive 对象，只有 increment 函数可以修改它。state 是 internalState 的一个只读代理，外部组件只能读取 state 的属性，不能修改它。这样可以保证状态的可控性和可预测性。

5. 使用 `toRefs` 解决解构丢失响应性的问题

前面提到过，从 reactive 对象解构出来的属性会失去响应性。为了解决这个问题，可以使用 toRefs 函数。toRefs 可以将响应式对象的属性转换为 ref 对象。ref 对象会保持对原始响应式属性的引用，因此即使解构了 ref 对象，仍然可以保持响应性。

import { reactive, toRefs } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello Vue!'
});

const { count, message } = toRefs(state);

// count 和 message 现在是 ref 对象，可以保持响应性
console.log(count.value); // 输出: 0

// 修改 count.value 会触发视图更新
count.value++;

在这个例子中，count 和 message 是 ref 对象。我们可以通过 count.value 和 message.value 来访问它们的值。修改 count.value 会触发视图更新，因为 count 仍然保持对原始 state.count 的引用。

toRefs 通常在组件的 setup 函数中使用，以便将响应式属性暴露给模板。

import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello Vue!'
    });

    return {
      ...toRefs(state)
    };
  },
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <p>Message: {{ message }}</p>
    </div>
  `
};

在这个例子中，我们使用 ...toRefs(state) 将 state 对象的所有属性转换为 ref 对象，并将其暴露给模板。这样我们就可以在模板中使用 count 和 message，而不需要使用 state.count 和 state.message。

6. 实际案例分析：构建一个简单的计数器组件

让我们通过一个简单的计数器组件来演示 reactive 和 readonly 的用法。

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <button @click="increment">Increment</button>
    <button @click="reset">Reset</button>
  </div>
</template>

<script>
import { reactive, readonly } from 'vue';

export default {
  setup() {
    const internalState = reactive({
      count: 0
    });

    const state = readonly(internalState);

    const increment = () => {
      internalState.count++;
    };

    const reset = () => {
      internalState.count = 0;
    };

    return {
      state,
      increment,
      reset
    };
  }
};
</script>

在这个组件中，我们使用 reactive 创建了一个内部状态 internalState，并使用 readonly 将其转换为只读状态 state。increment 和 reset 函数可以修改 internalState 的值。组件模板使用 state.count 来显示计数器的值。

这个例子展示了如何使用 reactive 和 readonly 来创建一个可控的状态管理系统。组件模板只能读取状态，而不能直接修改状态。状态的修改只能通过 increment 和 reset 函数来完成。

7. 总结：`reactive` 与 `readonly` 的取舍

reactive 用于创建响应式对象，允许修改属性，适用于需要动态更新状态的场景。readonly 用于创建只读的响应式对象，禁止修改属性，适用于需要保护状态，防止意外修改的场景。合理运用两者，能够构建更健壮、更易维护的Vue应用。

Vue 3 的 reactive 与 readonly：创建只读的响应式对象

1. 响应式基础：reactive 的作用

2. 数据保护：readonly 的作用

3. reactive 与 readonly 的区别

4. 结合 reactive 和 readonly 实现更灵活的状态管理

5. 使用 toRefs 解决解构丢失响应性的问题