Vue 3的`reactive`与`ref`：如何处理嵌套对象与基本类型？

Vue 3 的 Reactive 与 Ref：嵌套对象与基本类型的处理

大家好，今天我们来深入探讨 Vue 3 中 reactive 和 ref 这两个核心 API，重点关注它们在处理嵌套对象和基本类型时的不同行为和适用场景。理解它们的差异对于构建高效且易于维护的 Vue 应用至关重要。

理解响应式系统：Proxy 与 Value

在深入 reactive 和 ref 之前，我们需要先了解 Vue 3 响应式系统的基础。Vue 3 使用了 JavaScript 的 Proxy 来追踪对象的属性访问和修改。简单来说，Proxy 允许我们拦截对象上的各种操作，例如读取属性 (get)、设置属性 (set) 和删除属性 (deleteProperty)。

当我们在 Vue 组件中使用响应式数据时，Vue 会创建一个 Proxy 对象，拦截对该对象属性的访问。当属性被读取时，Vue 会记录当前组件的渲染函数（或计算属性、侦听器）依赖于该属性。当属性被修改时，Vue 会通知所有依赖于该属性的组件进行更新。

与 Proxy 直接作用于对象不同，ref 采用了一种 "value" 的概念。它创建一个包含 value 属性的对象，我们通过 ref.value 来访问和修改实际的值。ref 内部也使用了响应式机制，当 ref.value 被修改时，依赖于它的组件也会更新。

Reactive：深度响应式对象

reactive 函数接收一个普通 JavaScript 对象，并返回一个响应式代理对象。这意味着对代理对象及其嵌套对象的任何属性的修改都会触发视图更新。

代码示例：

import { reactive } from 'vue';

const state = reactive({
  name: 'Alice',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
});

// 修改 state.name 会触发视图更新
state.name = 'Bob';

// 修改 state.address.city 也会触发视图更新
state.address.city = 'Los Angeles';

console.log(state.name); // Bob
console.log(state.address.city); // Los Angeles

在这个例子中，state 对象及其嵌套的 address 对象都被转换成了响应式对象。对 state.name 或 state.address.city 的修改都会触发 Vue 的响应式系统，从而更新视图。

限制：

• reactive 只能用于对象类型（包括数组和对象）。尝试将基本类型（例如字符串、数字、布尔值）传递给 reactive 会导致错误。
• reactive 返回的是一个代理对象，而不是原始对象。因此，我们应该始终使用代理对象，而不是原始对象，以确保响应式行为。
• reactive 会对对象进行深度转换，这意味着嵌套对象也会变成响应式对象。但是，如果对象中包含函数，函数本身不会变成响应式的。
• 直接替换响应式对象的属性（例如 state = reactive({...})）会打破响应式连接。正确的方式是修改现有对象的属性，而不是替换整个对象。

使用场景：

reactive 适用于管理复杂的、嵌套的对象状态。它能够轻松地追踪对象内部的任何属性修改，并自动更新视图。

Ref：包装基本类型和对象

ref 函数接收一个值（可以是基本类型或对象），并返回一个带有 .value 属性的响应式对象。通过修改 .value，我们可以触发视图更新。

代码示例：

import { ref } from 'vue';

const count = ref(0);

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

console.log(count.value); // 1

const user = ref({ name: 'Charlie', age: 25 });

// 修改 user.value.name 会触发视图更新
user.value.name = 'David';

console.log(user.value.name); // David

在这个例子中，count 和 user 都是 ref 对象。我们需要通过 count.value 和 user.value 来访问和修改它们的值。

自动解包 (Auto Unwrapping):

在模板中使用 ref 时，Vue 会自动解包 ref 对象，这意味着我们可以直接使用 count 和 user，而无需显式地访问 .value。

<template>
  <p>Count: {{ count }}</p>
  <p>Name: {{ user.name }}</p>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const user = ref({ name: 'Charlie', age: 25 });

    return {
      count,
      user
    };
  }
};
</script>

需要注意: 自动解包只发生在模板中，在 JavaScript 代码中仍然需要使用 .value 来访问 ref 的值。

使用场景：

• 管理基本类型： ref 是管理数字、字符串、布尔值等基本类型状态的理想选择。
• 管理对象： 虽然 reactive 更适合管理复杂的对象，但 ref 也可以用来管理对象。在这种情况下，ref.value 会指向整个对象，我们可以通过修改 ref.value 的属性来触发视图更新。
• 与第三方库集成： 有些第三方库可能不兼容 Vue 的响应式系统。在这种情况下，我们可以使用 ref 来包装第三方库的数据，以便在 Vue 组件中使用。

Reactive 与 Ref 的对比：

为了更好地理解 reactive 和 ref 的区别，我们用表格来总结它们的主要差异：

特性	reactive	ref
适用类型	对象 (Object, Array)	任意类型 (基本类型、对象)
访问方式	直接访问属性 (例如 state.name)	通过 .value 属性访问 (例如 count.value)
响应式深度	深度响应式 (嵌套对象也会被转换成响应式对象)	浅响应式 (只有 .value 是响应式的)
自动解包	不自动解包	在模板中自动解包
性能	通常比 ref 性能更好，特别是对于大型对象	对于大型对象，可能不如 reactive 性能好
主要用途	管理复杂、嵌套的对象状态	管理基本类型状态，或者包装第三方库的数据
类型提示友好度	相对较差，需要使用 as 断言或者 toRefs 辅助	相对较好，类型推断更准确
对象替换	直接替换会打破响应式连接	可以安全替换 .value 指向的对象

如何选择：Reactive 还是 Ref？

选择使用 reactive 还是 ref 取决于你的具体需求：

• 如果你的状态是一个复杂、嵌套的对象，并且你需要追踪对象内部的任何属性修改，那么 reactive 是更好的选择。
• 如果你的状态是一个基本类型（例如数字、字符串、布尔值），或者你需要与第三方库集成，那么 ref 是更好的选择。
• 如果你的状态是一个对象，但你只需要追踪整个对象的替换，而不需要追踪对象内部的属性修改，那么 ref 也是一个不错的选择。

一些更具体的建议：

• 对于组件的 props，通常使用 ref 来包装，因为 props 可能会被父组件修改。
• 对于组件的 data，通常使用 reactive 来管理，因为 data 通常包含复杂的对象状态。
• 对于计算属性和侦听器，可以根据具体情况选择 reactive 或 ref。

嵌套对象与响应式陷阱

在使用 reactive 和 ref 处理嵌套对象时，需要注意一些常见的陷阱：

1. 失去响应式：

当我们在 reactive 对象中添加新的属性时，如果该属性不是在初始化时定义的，那么它可能不会被转换成响应式对象。

import { reactive } from 'vue';

const state = reactive({
  name: 'Alice'
});

// 尝试添加新的属性
state.age = 30; // 此时 age 不是响应式的

// 正确的做法是使用 Vue.set 或展开运算符
import { set } from 'vue';

set(state, 'age', 30); // 使用 Vue.set

state = reactive({ ...state, age: 30 }); // 使用展开运算符，重新创建响应式对象

2. 浅响应式：

ref 默认是浅响应式的，这意味着只有 .value 属性是响应式的，而 .value 指向的对象内部的属性修改不会触发视图更新。

import { ref } from 'vue';

const user = ref({ name: 'Charlie', age: 25 });

// 修改 user.value.name 不会触发视图更新 (因为 ref 是浅响应式的)
user.value.name = 'David';

// 如果需要深度响应式，可以使用 reactive 包装 ref.value
import { reactive, ref } from 'vue';

const user = ref(reactive({ name: 'Charlie', age: 25 }));

// 现在修改 user.value.name 会触发视图更新
user.value.name = 'David';

3. 避免直接替换：

直接替换 reactive 对象会导致失去响应式连接。

import { reactive } from 'vue';

const state = reactive({ name: 'Alice' });

// 错误的做法：直接替换 reactive 对象
// 这样做会导致失去响应式
// state = { name: 'Bob' };

// 正确的做法：修改 reactive 对象的属性
state.name = 'Bob';

4. 解构的陷阱：

解构 reactive 对象可能会导致失去响应式连接。

import { reactive } from 'vue';

const state = reactive({ name: 'Alice', age: 30 });

// 错误的做法：解构 reactive 对象
// 这样做会导致失去响应式
// const { name, age } = state;
// name = 'Bob'; // 此时修改 name 不会触发视图更新

// 正确的做法：使用 toRefs 解构 reactive 对象
import { toRefs, reactive } from 'vue';

const state = reactive({ name: 'Alice', age: 30 });
const { name, age } = toRefs(state);

// 现在修改 name.value 会触发视图更新
name.value = 'Bob';

toRefs 会将 reactive 对象的每个属性都转换成 ref 对象，从而保持响应式连接。

示例：购物车组件

为了更好地说明 reactive 和 ref 的使用，我们来看一个简单的购物车组件的示例：

<template>
  <div>
    <h2>购物车</h2>
    <ul>
      <li v-for="item in cart.items" :key="item.id">
        {{ item.name }} - ${{ item.price }} - 数量: {{ item.quantity }}
        <button @click="increment(item)">+</button>
        <button @click="decrement(item)">-</button>
      </li>
    </ul>
    <p>总价: ${{ cart.total }}</p>
  </div>
</template>

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

export default {
  setup() {
    const cart = reactive({
      items: [
        { id: 1, name: 'Product A', price: 10, quantity: 1 },
        { id: 2, name: 'Product B', price: 20, quantity: 2 }
      ],
      total: 0
    });

    cart.total = computed(() => {
      return cart.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
    });

    const increment = (item) => {
      item.quantity++;
    };

    const decrement = (item) => {
      if (item.quantity > 0) {
        item.quantity--;
      }
    };

    return {
      cart,
      increment,
      decrement
    };
  }
};
</script>

在这个例子中，我们使用 reactive 来管理购物车的数据，包括商品列表和总价。total 使用 computed 函数来计算，当商品数量发生变化时，总价会自动更新。increment 和 decrement 函数用于增加和减少商品数量。

总结

reactive 和 ref 是 Vue 3 响应式系统的两个核心 API。reactive 适用于管理复杂的、嵌套的对象状态，而 ref 适用于管理基本类型状态或与第三方库集成。理解它们的差异对于构建高效且易于维护的 Vue 应用至关重要。合理选择两者并避免常见的响应式陷阱，可以编写出更加健壮的 Vue 代码。掌握这些知识点，能写出更好的vue代码。