vue3中的reactive和ref

在Vue 3中，reactive和ref是两个常用的响应式API，用于创建响应式的数据。它们的主要区别在于reactive用于创建对象或数组的响应式引用，而ref用于创建单个值的响应式引用。下面我将分别介绍它们的详细用法，并提供代码示例。

1. reactive

reactive函数用于创建一个响应式对象，当对象的属性发生变化时，相关的组件将会自动重新渲染。

使用方法：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello',
});

// 修改响应式对象的属性
state.count++; // 触发重新渲染
state.message = 'Hello Vue'; // 触发重新渲染
1
2
3
4
5
6
7
8
9
10

示例代码说明：

import { reactive, watchEffect } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello',
});

// 监听响应式对象的变化
watchEffect(() => {
  console.log('Count changed: ', state.count);
  console.log('Message changed: ', state.message);
});
1
2
3
4
5
6
7
8
9
10
11
12

在这个示例中，我们使用reactive函数创建了一个包含count和message属性的响应式对象state。然后，通过watchEffect函数监听了state对象的变化，并在控制台输出变化的信息。

2. ref

ref函数用于创建一个包含响应式值的引用，当引用的值发生变化时，相关的组件也会自动重新渲染。

使用方法：

import { ref } from 'vue';

const count = ref(0);

// 修改引用的值
count.value++; // 触发重新渲染
1
2
3
4
5
6

示例代码说明：

import { ref, watchEffect } from 'vue';

const count = ref(0);

// 监听引用的值的变化
watchEffect(() => {
  console.log('Count changed: ', count.value);
});
1
2
3
4
5
6
7
8

在这个示例中，我们使用ref函数创建了一个包含响应式值的引用count。然后，通过watchEffect函数监听了count引用的变化，并在控制台输出变化的信息。

这就是在Vue 3中使用reactive和ref创建响应式数据的详细介绍及示例代码。这两个API是Vue 3中非常重要的响应式工具，能够帮助开发者更方便地管理组件状态。