[vue3]响应式：ref与reactive

    在 Vue 3 中，ref与reactive 都是非常重要的函数，用于创建响应式的数据对象。都是 Vue Composition API 的一部分，用于在组件中声明响应式的引用。

一、ref：

    ref用于创建一个响应式的数据对象，可以持有任何类型的值，并且当这个值发生变化时，Vue 会自动追踪并更新视图。ref函数返回的是“.value”属性对象，所以当ref创建响应式变量时，要通过它来更新与访问。

代码例子：

//导入ref函数

import {ref} from 'vue'

const count = ref(0)

const setCount = ()=>{

//脚本区域修改ref产生的响应式对象数据，必须通过.value属性

count.value++

}

二、reactive：

    reactive 也是用于创建响应式状态的函数与 ref 类似，但适用于对象或数组等复杂数据类型。reactive 让整个对象或数组变为响应式，这意味着当对象的任何属性发生变化时，Vue 会自动追踪这些变化并更新相关的视图。

代码例子：

// //导入函数

// import { reactive  } from 'vue';

// //执行函数 传入一个对象类型的参数 变量接收

// const state = reactive({

//   count: 0

// })



// const setCount = () => {

//   state.count++

// }

三、两者区别：

     reactive 更适合处理对象、数组等复杂类型的数据，它能将整个数据结构变为响应式的。

     ref 更适合处理基本类型的数据，如字符串、数字、布尔值等，也可以包裹对象，但通常用于单个值。