Vue3深度解析：reactive和ref的区别你真的了解吗？

Vue 3中引入了Composition API，其中包含了reactive和ref两个核心函数。这两个函数都是用于创建响应式数据的，但它们之间有一些区别。

首先，让我们来看一下reactive函数。reactive函数接受一个普通对象作为参数，并返回一个新的响应式对象。这个响应式对象会跟踪所有属性的变化，并在属性发生变化时触发相应的更新操作。reactive函数的使用非常简单，只需要将需要转换为响应式的对象传递给它即可。

下面是一个使用reactive函数的示例代码：

import { reactive } from 'vue';

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

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

在上面的代码中，我们使用reactive函数将一个包含count和message属性的对象转换为响应式对象。当我们修改count属性的值时，reactive函数会自动追踪到这个变化，并触发组件的重新渲染。

接下来，让我们看一下ref函数。ref函数与reactive函数类似，也是用于创建响应式数据的。不同之处在于，ref函数返回的是一个响应式的引用，而不是整个对象。这意味着我们可以在模板中直接使用这个引用，而不需要通过.value来访问实际的值。

下面是一个使用ref函数的示例代码：

import { ref } from 'vue';

const count = ref(0);
const message = ref('Hello Vue 3!');

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

在上面的代码中，我们使用ref函数创建了两个响应式的引用count和message。这些引用可以在模板中直接使用，例如{{ count }}和{{ message }}。当我们修改ref引用的值时，相关的组件也会相应地更新。

总结一下，reactive函数和ref函数都可以用于创建响应式数据，但它们的区别在于reactive函数返回的是整个对象，而ref函数返回的是对象的引用。使用ref函数可以更方便地在模板中直接使用响应式数据，而不需要通过.value来访问实际的值。选择使用哪个函数取决于具体的需求和场景。