Vue 3响应式大对决：Ref vs Reactive

1. 介绍

在Vue 3的响应式系统中，ref 和 reactive 是两个核心概念，它们为开发者提供了处理响应式数据的不同方式。理解它们的特性和区别对于构建灵活、高效的Vue应用至关重要。

1.1 概述：

• ref 是用于创建单一变量的工具，它可以包裹任何 JavaScript 类型，使之成为响应式数据。
• reactive 则是用于创建具有复杂结构的对象的函数，将整个对象变成响应式，可以追踪对象内部的嵌套属性。

1.2 用途：

• ref 适用于简单的数据，如数字、字符串、布尔值等，以及需要在模板中直接使用的变量。
• reactive 适用于管理复杂对象、数组等结构化数据，特别是当涉及到嵌套属性的状态管理时。

2. Ref

2.1 基础用法

ref 是Vue 3中用于创建响应式变量的工具。它可以包裹任何 JavaScript 类型，使之具有响应性。下面是 ref 的基本用法：

import { ref } from 'vue';

// 使用 ref 声明一个变量
const count = ref(0);

console.log(count.value); // 0
count.value++; // 变更变量的值
console.log(count.value); // 1

这里的 count 是一个带有 .value 属性的对象，通过 .value 来访问或修改变量的值。在模板中，Vue会自动解包 ref，所以在模板中直接使用变量即可，无需额外的 .value：

<template>
  <div>{{ count }}</div>
</template>

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

export default {
  setup() {
    const count = ref(0);
    return { count };
  },
};
</script>

2.2 在 setup() 中使用

在 setup() 函数中使用 ref 可以方便地将响应式变量暴露给模板。这是一种常见的模式，使得变量在模板中可直接访问：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    return { count };
  },
};

2.3 <script setup> 语法

使用 <script setup> 语法可以更加简洁地声明和使用 ref。它将 ref 的声明和返回整合到了一起：

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

const count = ref(0);
</script>

<template>
  <div>{{ count }}</div>
</template>

这种语法的引入减少了模板中的冗余代码，使得组件更加清晰和简洁。

2.4 为何使用 ref？

使用 ref 的主要原因在于其轻量且直观的特性。它适用于管理简单的变量，而且在模板中的使用非常自然。对于那些不需要复杂嵌套结构的数据，ref 是一个高效、易懂的选择。在处理单一状态时，它是一个强大的工具。

3. Reactive

3.1 基础概念

reactive 是Vue 3中用于创建具有响应性的对象的函数。通过 reactive，整个对象都会变得响应式，使得Vue能够智能地追踪对象内部的变化。以下是 reactive 的基础用法：

import { reactive } from 'vue';

// 使用 reactive 创建一个具有响应性的对象
const state = reactive({
  count: 0,
  user: {
    name: 'John',
    age: 25,
  },
  hobbies: ['Reading', 'Coding'],
});

console.log(state.count); // 0
state.count++;
console.log(state.count); // 1

3.2 在模板中使用 reactive

与 ref 类似，使用 reactive 创建的对象在模板中的使用也非常直观：

<template>
  <div>
    <p>{{ state.user.name }} is {{ state.user.age }} years old.</p>
    <ul>
      <li v-for="hobby in state.hobbies" :key="hobby">{{ hobby }}</li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      user: {
        name: 'John',
        age: 25,
      },
      hobbies: ['Reading', 'Coding'],
    });

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

3.3 深层响应性

一个显著的特点是 reactive 支持深层响应性。这意味着无论是对象内部的嵌套对象还是数组，都会被响应式地追踪变化：

import { reactive } from 'vue';

const deepState = reactive({
  user: {
    name: 'John',
    age: 25,
  },
  hobbies: ['Reading', 'Coding'],
});

3.4 与 ref 的区别

• ref 适用于创建简单的变量，而 reactive 适用于创建具有复杂结构的对象。
• ref 返回的是一个带有 .value 属性的对象，而 reactive 返回的是一个代理对象。

3.5 为何使用 reactive？

使用 reactive 的主要原因是处理复杂的数据结构，使整个对象都能够在数据变化时得到智能更新。它为Vue开发者提供了一种更结构化的方式来管理数据，特别适用于大型的、嵌套的数据对象。总体而言，reactive 是Vue响应式系统的一项强大工具，为处理复杂数据提供了更大的灵活性。

4. 比较与选择

4.1 性能和适用场景

• ref：

  • 性能较好： 由于 ref 处理的是简单的变量，性能通常较为出色。
  • 适用于简单状态： 适用于管理单一的、简单的状态，比如数字、字符串等。

• reactive：

  • 性能较差： 相对于 ref，reactive 在处理大型对象和深层嵌套时可能性能较差。
  • 适用于复杂结构： 适用于管理具有复杂结构的对象，特别是涉及到嵌套属性的复杂数据。

4.2 对象的处理

• ref：

  • 简单变量： 适用于处理简单的变量，如数字、字符串、布尔值等。
  • 模板中直接使用： 在模板中直接使用变量，语法清晰。

• reactive：

  • 复杂对象： 适用于处理具有嵌套结构、对象、数组等复杂数据。
  • 深层响应性： 支持深层响应性，能够智能地追踪对象内部的变化。

4.3 局限性和注意事项

• ref：

  • 值类型受限： 只能用于包装值类型，不适用于复杂对象。
  • 无法替换整个对象： 替换整个对象会导致响应性连接丢失。

• reactive：

  • 性能开销： 在处理大型、深层次嵌套的对象时，可能存在性能开销。
  • 解构操作不友好： 对象解构时，变量会失去响应性连接。

5. 示例与场景

5.1 简单场景

使用 ref 管理计数器：

vueCopy code
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

场景说明：

• 在简单的场景中，使用 ref 可以方便地管理计数器。
• 模板中直接使用 count 变量，无需额外的 .value。

5.2 复杂场景

使用 reactive 管理用户信息和订单：

vueCopy code
<template>
  <div>
    <p>User: {{ user.name }}, Age: {{ user.age }}</p>
    <ul>
      <li v-for="order in orders" :key="order.id">{{ order.product }}</li>
    </ul>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

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

const orders = reactive([
  { id: 1, product: 'Product A' },
  { id: 2, product: 'Product B' },
]);

// 修改用户信息或订单时，模板会智能更新
user.age = 31;
orders.push({ id: 3, product: 'Product C' });
</script>

场景说明：

• 在复杂场景中，使用 reactive 可以管理具有嵌套结构的对象（如用户信息和订单列表）。
• 通过直接修改属性，模板会智能更新。