vue3 ref 和 reactive 区别

Vue 3 引入了两种新的响应式 API：ref 和 reactive。这两个 API 都用于创建响应式数据，但它们的使用场景和行为有所不同。

ref

用途：ref 用于创建基本数据类型的响应式引用，如字符串、数字、布尔值等。
使用方式：在模板中使用时，Vue 会自动添加 .value 来访问 ref 创建的数据。在 JavaScript 中，你需要通过 .value 属性来获取或修改 ref 对象中的数据。
原理：ref 通过 Object.defineProperty 的 get 和 set 来实现响应性，它返回一个对象，该对象的 .value 属性是响应式的。

reactive

用途：reactive 用于创建对象或数组的响应式代理。
使用方式：在模板中直接使用 reactive 创建的数据，不需要添加 .value。在 JavaScript 中，你可以直接访问和修改 reactive 对象的属性，就像访问普通 JavaScript 对象一样。
原理：reactive 使用 Proxy 来创建响应式代理，这意味着你可以访问和修改对象的所有属性，而不需要通过 .value。

区别总结

数据类型：ref 适用于基本数据类型，而 reactive 适用于对象和数组。
访问方式：ref 需要通过 .value 访问或修改数据，reactive 则直接访问对象属性。
模板中的使用：在 Vue 模板中使用 ref 类型的数据时，Vue 会自动处理 .value，而在 reactive 对象中，你可以直接使用属性。
设计理念：ref 主要解决单一元素/数据的响应式问题，而 reactive 解决复杂数据结构的响应式问题。

示例

// 使用 ref

const count = ref(0);

// 在模板中使用 count.value 来显示或绑定
// 在 JavaScript 中访问或修改 count.value

// 使用 reactive

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

// 在模板中直接使用 state.count 来显示或绑定
// 在 JavaScript 中直接访问或修改 state.count

在实际开发中，你可以根据需要创建的数据类型和使用场景来选择使用 ref 还是 reactive。
对于简单的基本数据类型，使用 ref 可能更合适；而对于复杂的数据结构，如组件的状态管理，reactive 提供了更直观和方便的方式来处理。