【Vue3】使用ref与reactive创建响应式对象

在 Vue 3 中，响应式系统的核心在于 ref 和 reactive。这两者为我们提供了一种非常灵活且直观的方式来创建响应式对象，使得我们能够更方便地管理状态和处理数据变化。本文将详细介绍 ref 和 reactive 的使用方法、适用场景以及代码示例。

一、ref 的使用

ref 是一个用于基本数据类型（如数字、字符串、布尔值等）和单一对象的响应式 API。它的主要作用是将单一值包裹成响应式对象，并允许我们在模板中直接使用，而不需要访问其 .value 属性。然而，在 JavaScript 中，我们直接使用 ref 的 .value 属性来修改数据。

示例代码：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="changeTitle">改变标题</button>
  </div>
</template>

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

export default {
  setup() {
    // 创建一个响应式的字符串
    const title = ref('Hello, Vue 3!');

    // 定义一个方法来改变标题
    const changeTitle = () => {
      title.value = 'Hello, Reactive World!';
    };

    return {
      title,
      changeTitle,
    };
  },
};
</script>

在上面的例子中，我们使用 ref 来创建一个响应式的字符串 title。通过 changeTitle 方法，我们可以更新 title 的值。用户点击按钮后，标题会实时更新，而不需要重新加载整个组件。

二、reactive 的使用

reactive 用于将一个对象转换为响应式对象，可以自动响应对象中所有属性的变化。它适用于更复杂的数据结构，尤其是对象和数组。

示例代码：

<template>
  <div>
    <h1>{{ user.name }}</h1>
    <p>年龄: {{ user.age }}</p>
    <button @click="incrementAge">增加年龄</button>
  </div>
</template>

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

export default {
  setup() {
    // 创建一个响应式对象
    const user = reactive({
      name: 'Alice',
      age: 25,
    });

    // 定义一个方法来增加年龄
    const incrementAge = () => {
      user.age += 1;
    };

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

在这个示例中，我们使用 reactive 创建了一个 user 对象，该对象具有 name 和 age 两个属性。通过 incrementAge 方法，我们能够增加用户的年龄，界面会随之更新。

三、ref 与 reactive 的选择

在实际开发中，选择使用 ref 还是 reactive 依赖于你的需求：

• 使用 ref：当你需要处理基本数据类型或单一值时。也适合用于简单的状态管理。
• 使用 reactive：当你有一个更复杂的状态结构（如对象或数组）时，使用 reactive 可以更简单地管理多个属性和状态变化。

结论

Vue 3 使用 ref 和 reactive 提供了强大且灵活的响应式支持，这使得状态管理和数据更新变得更加高效和简洁。通过合理选择这两者，我们可以更好地管理组件的状态，提升开发效率。在实际项目中，建议根据需求灵活切换使用 ref 和 reactive，以达到最佳的代码结构和可维护性。