Vue3 ref和reactive的使用和区别以及响应式原理

这里介绍下ref和reactive函数的使用区别和响应式原理，以及在实际项目中如何使用和一些常见问题

ref函数：

语法：const xxx = ref (initValue)
接受的数据类型：基本类型，引用类型
作用：把参数加工成一个响应式对象，全称为reference对象(我们下面一律简称为ref对象)
核心原理：如果使用的是基本类型响应式依赖Object.defineProperty( )的get( )和set( )，如果ref使用的是引用类型，底层ref会借助reactive的proxy 定义响应式
基本使用：

如果ref使用的是对象，ref会借助reactive生成proxy

reactive函数：

语法：const xxx = ref (源对象)
接受的数据类型：引用类型
作用：把参数加工成一个代理对象，全称为proxy对象
核心原理：基于Es6的Proxy实现，通过Reflect反射代理操作源对象，相比于reactive定义的浅层次响应式数据对象，reactive定义的是更深层次的响应式数据对象

基本使用：

注：reactive申明的无法直接替换整个对象，如果有这个需求请使用ref

总结：

ref和reactive都可以做响应式

ref:一般用在定义基本类型和引用类型，如果是引用类型底层会借助reactive形成proxy代理对象,可以直接复制整个对象，如table的数据请求回来，需要将数据整体赋值个响应对象这时如果使用的是reactive就无法进行响应。

reactive：一般用在引用类型，如{}等,不能一次性修改整个对象，如我们后端请求table的数据数据，如果想一次性赋值的整个数组的话，就行不通，此时建议使用ref来定义数组。

ref和reactive建议使用

第一种写法：除了对象都用ref来定义

let switchKG = ref(false)
console.log(switchKG.value)

let arr = ref([])
arr.value = [1, 2, 3, 4, 5]
console.log(arr.value)

let Obj = reactive({
  arr: []
})
reactive.arr = [1, 2, 3, 4, 5]

第二种写法：都用reactive来定义，然后用toRefs进行导出到页面使用