我喜欢 Vue 3 的 Composition API，它提供了两种方法来为 Vue 组件添加响应式状态：ref和reactive。当你使用ref时到处使用.value是很麻烦的，但当你用reactive创建的响应式对象进行重构时，也很容易丢失响应性。 在这篇文章中，我将阐释你如何来选择reactive以及ref。

一句话总结：默认情况下使用ref，当你需要对变量分组时使用reactive。

理解：
1.ref 是定义简单类型 和单一的对象
2.reactive 定义复杂的类型

梳理文档：
ref 和 reactive 都是 Vue.js 3.x 版本中新增的响应式 API，用于实现组件的数据响应式更新。它们的主要区别如下：