🌏总结：reactive 适用于创建复杂的响应式对象，而 ref 则适用于创建简单的响应式值。
reactive 和 ref 是 Vue 3 Composition API 中用于创建响应式数据的两种主要方式，它们的作用如下：
-
响应式数据管理：
reactive:reactive函数用于创建一个包含响应式数据的响应式对象。这意味着当对象的属性发生变化时，相关的视图会自动更新。ref:ref函数用于创建一个包装后的响应式值。当该值发生变化时，相关的视图也会自动更新。
-
数据变化的跟踪和响应：
reactive: 创建的响应式对象可以包含多个属性，当任何一个属性发生变化时，相关的视图都会进行更新。ref: 创建的响应式值是单个值的引用，当值发生变化时，相关的视图会进行更新。
-
数据访问与修改：
reactive: 创建的响应式对象可以直接访问和修改对象的属性，就像普通的 JavaScript 对象一样。ref: 创建的响应式值通过.value属性来访问和修改其内部值。
-
用法区别：
reactive: 适用于创建复杂的响应式对象，例如包含多个属性的对象、嵌套对象等。ref: 适用于创建简单的响应式值，例如单个变量、计数器、DOM 元素的引用等。
举个例子：
reactive：
import { reactive } from 'vue'const user = reactive({username: 'John',age: 30
})// 修改属性
user.username = 'Jane'
user.age = 35console.log(user.username) // 输出: Jane
console.log(user.age) // 输出: 35
ref：
import { ref } from 'vue'const age = ref(30)// 修改值
age.value = 35console.log(age.value) // 输出: 35
)
