【vue】reactive和ref的区别在 Vue 3 中，reactive 和 ref 是两种创建响应式数据的方法。它

在 Vue 3 中，reactive 和 ref 是两种创建响应式数据的方法。它们都可以用来跟踪数据的变化并在数据发生变化时自动更新视图。不过，它们在使用方式和适用场景上有所不同。

const state = reactive({ count: 0 });
state.count++;

用于创建一个响应式的引用值（可以是任何类型的值）。
ref 返回一个包含 value 属性的响应式对象，你需要通过 .value 属性来获取或修改它的值。
适用于基本数据类型或只需要管理单个属性的场景。
在模板中直接使用时，不需要 .value，Vue 会自动展开。在 JavaScript 中访问或修改 ref 创建的响应式值时，需要使用 .value。

const count = ref(0);
count.value++;

在 Vue 3 的组合式 API 中，通常需要使用 .value 来访问或修改 ref 创建的响应式值。但在 Vue 模板中，你可以直接使用 ref 创建的响应式变量，而不需要 .value。Vue 的模板编译器会自动处理这种情况，让你可以像使用普通变量一样使用它们。

例如，如果你有一个 count 变量是通过 ref 创建的：

const count = ref(0);

在 Vue 模板中，你可以直接这样使用：

<template>
  <div>{{ count }}</div>
</template>

Vue 会自动识别 count 是一个 ref 并在内部使用 count.value。

总结来说，reactive 适用于复杂的对象，而 ref 适用于单一的值。在 JavaScript 中操作 ref 创建的值时需要 .value，但在模板中使用时不需要。

【vue】reactive和ref的区别