vue3 ref 与shallowRef reactive与shallowReactive

ref

给数据添加响应式，基本类型采用object.defineProperty进行数据劫持，对象类型是借助reactive 实现响应式，采用proxy 实现数据劫持，利用reflect进行源数据的操作

 let country = ref({
                count:20,
                names:['河南','山东','陕西'],
                objs:{
                    key:'01',
                    value:{
                        name:'张三'
                    }
                }
            })
            console.info(country)

shallowRef:

只给基本数据添加响应式，对于对象类型的响应式不予处理

  let country = shallowRef({
                count:20,
                names:['河南','山东','陕西'],
                objs:{
                    key:'01',
                    value:{
                        name:'张三'
                    }
                }
            })
            console.info(country)

shallowReactive:

只处理对象最外层属性的响应式（浅响应式)(deep:false)

reactive:

给对象添加响应式（深响应式）（deep:true）

什么时候使用？

如果有一个对象数据，结构比较深，但变化时只是外层属性变化===》shallowReactive
如果有一个对象数据，后续功能不会改对象中的属性，而是生成新的对象来替换 ===》shallowRef