Vue3 中如何使用 ref 和 reactive

在 Vue3 中，ref 和 reactive 是两种常用的响应式 API，用于管理组件的状态。它们可以帮助开发者轻松地创建和管理响应式数据，从而实现数据的自动更新和视图的自动渲染。本文将详细介绍 ref 和 reactive 的使用方法及其区别。

1. ref 的使用

ref 是 Vue3 中用于创建响应式数据的 API 之一。它通常用于处理基本数据类型（如 string、number、boolean 等），但也可以用于处理对象和数组。

1.1 基本用法

import { ref } from 'vue';

const count = ref(0);

console.log(count.value); // 输出: 0

count.value++; // 修改值
console.log(count.value); // 输出: 1

在上面的例子中，ref 创建了一个响应式的 count 变量，初始值为 0。通过 count.value 可以访问和修改这个值。

1.2 在模板中使用

在 Vue 模板中，ref 的值可以直接使用，不需要通过 .value 访问。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

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

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

    function increment() {
      count.value++;
    }

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

在这个例子中，count 的值会在点击按钮时自动更新，并且视图也会随之更新。

1.3 处理对象和数组

虽然 ref 通常用于基本数据类型，但它也可以用于处理对象和数组。

import { ref } from 'vue';

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

console.log(user.value.name); // 输出: Alice

user.value.age = 26; // 修改对象属性

2. reactive 的使用

reactive 是 Vue3 中用于创建响应式对象的 API。它通常用于处理复杂的对象或数组。

2.1 基本用法

import { reactive } from 'vue';

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

console.log(state.count); // 输出: 0

state.count++; // 修改值
console.log(state.count); // 输出: 1

在上面的例子中，reactive 创建了一个响应式的 state 对象，包含 count 和 name 两个属性。可以直接通过 state.count 访问和修改这些属性。

2.2 在模板中使用

在 Vue 模板中，reactive 对象的属性可以直接使用。

<template>
  <div>
    <p>{{ state.count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

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

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

    function increment() {
      state.count++;
    }

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

在这个例子中，state.count 的值会在点击按钮时自动更新，并且视图也会随之更新。

2.3 处理嵌套对象

reactive 可以处理嵌套对象，并且嵌套对象也会自动变成响应式的。

import { reactive } from 'vue';

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

console.log(state.user.name); // 输出: Alice

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

3. ref 和 reactive 的区别

• 数据类型：ref 通常用于基本数据类型，而 reactive 用于对象和数组。
• 访问方式：ref 需要通过 .value 访问和修改值，而 reactive 可以直接访问和修改对象的属性。
• 使用场景：ref 更适合处理单个值或简单的对象，而 reactive 更适合处理复杂的对象或嵌套对象。

4. 总结

在 Vue3 中，ref 和 reactive 是两种常用的响应式 API，它们可以帮助开发者轻松地管理组件的状态。ref 更适合处理基本数据类型或简单的对象，而 reactive 更适合处理复杂的对象或嵌套对象。根据具体的需求选择合适的 API，可以更高效地开发 Vue 应用。

通过本文的介绍，相信你已经掌握了 ref 和 reactive 的基本用法及其区别。在实际开发中，灵活运用这两种 API，可以让你更好地管理组件的状态，提升开发效率。