https://www.cnblogs.com/kousum/p/14399280.html

Vue3.0中ref和reactive的底层实现_眼小博的博客-CSDN博客 Vue3.0中ref和reactive的底层实现 

在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式

当我们给ref传递一个值之后，ref函数底层会自动将ref转换成reactive; ref(18) => reactive({value:18})

reactive里面参数定义必须是对象或者数组(json/arr)

ref和toRef的区别
(1). ref本质是拷贝，修改响应式数据不会影响原始数据；toRef的本质是引用关系，修改响应式数据会影响原始数据
(2). ref数据发生改变，界面会自动更新；toRef当数据发生改变是，界面不会自动更新
(3). toRef传参与ref不同；toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性 let state = ref(obj.name)  let state2 = toRef(obj,'name')

toRefs将对象的多个属性都变成响应式数据，并且要求响应式数据和原始数据关联，并且更新响应式数据的时候不更新界面，用于批量设置多个数据为响应式数据。(toRef一次仅能设置一个数据),

toRefs接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用toRef执行

五、结语

尽量不要混着用，reactive和ref选一种，toRef和toRefs选一种，不然代码会很乱。

基本数据类型：number,string,Boolean,null,undefined、Symbol、BigInt

toRefs()函数可以将reactive()创建出来的响应式对象，转换为普通对象，只不过这个对象上的每个属性节点，都是ref()类型的响应式数据 (ref底层是reactive 会包装 Proxy)

作用 : 对一个 响应式对象 的所有内部属性, 都做响应式处理, 保证展开或者解构出的数据也是响应式的( 一般配合 reactive 使用)

注意 : 对象一般使用 reactive，其他用 ref

常见应用场景如下：

<script>
import { reactive, ref, toRefs } from 'vue'
export default {
  setup() {
    // const money = ref(100) // 简单类型, ref
    // const car = reactive({ // 复杂类型, reactive
    //   brand: '赛车',
    //   price: 100
    // })
    // const name = ref('zs') // 简单类型, ref
    // money.value++ // ref需要.value取值
    const state = reactive({
      money: 100,
      car: {
        brand: '赛车',
        price: 100
      },
      name: 'zs'
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>

isRef(data)、isReactive(data)  //返回 true false  判断是否是ref类型 还是reactive类型

shallowRef、shallowReactive（也需先引入类似ref等） 表示非递归监听，浅递归  是监听的.value的变化

shallowReactive：  (只考虑第一层的响应式数据，前提数据是对象)

shallowRef：定义出来的不是响应式数据

 customRef

import { customRef  } from 'vue'
function myRef(value){
  return customRef((track,trigger)=>{
    return{
      get(){
        track()
        console.log('get',value)
        return value
      },
      set(newValue){
        console.log('set',newValue)
        value = newValue
        trigger()
      }
    }
  })
}

setup(){
    let age = myRef(18)
     function fn(){
      age.value +=1;
    }
return{ age,fn }
}