Vue3中的ref和reactive如何使用

Vue3 引入了 Composition API，其中 ref 和 reactive 是两个非常重要的函数，用于创建响应式数据。本文将详细介绍它们的用法和区别。

1. ref 的使用

ref 是 Vue3 中用于创建响应式数据的函数之一。它通常用于处理基本数据类型（如 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 在模板中使用

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

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

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

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

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

在模板中，ref 创建的变量可以直接使用，不需要加 .value，Vue 会自动解包。

1.3 处理对象和数组

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

import { ref } from 'vue';

const user = ref({
  name: 'John',
  age: 30,
});

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

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

2. reactive 的使用

reactive 是 Vue3 中用于创建响应式对象的函数。它通常用于处理对象和数组。

2.1 基本用法

import { reactive } from 'vue';

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

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

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

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

2.2 在模板中使用

<template>
  <div>
    <p>{{ state.count }}</p>
    <button @click="increment">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>

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

2.3 处理数组

reactive 也可以用于处理数组。

import { reactive } from 'vue';

const list = reactive([1, 2, 3]);

console.log(list[0]); // 输出: 1

list.push(4); // 修改数组
console.log(list); // 输出: [1, 2, 3, 4]

3. ref 和 reactive 的区别

• 数据类型：ref 通常用于基本数据类型，而 reactive 用于对象和数组。
• 访问方式：ref 创建的变量需要通过 .value 访问，而 reactive 创建的对象的属性可以直接访问。
• 解包：在模板中，ref 创建的变量会自动解包，而 reactive 创建的对象的属性不需要解包。

4. 总结

ref 和 reactive 是 Vue3 中创建响应式数据的两种主要方式。ref 更适合处理基本数据类型，而 reactive 更适合处理对象和数组。在实际开发中，可以根据需要选择合适的函数来创建响应式数据。

通过本文的介绍，你应该已经掌握了 ref 和 reactive 的基本用法和区别。希望这些知识能帮助你在 Vue3 项目中更好地使用 Composition API。