Vue3ref和reactive使⽤上的区别，toRef与toRefs函数
在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
toRefs()函数可以将reactive()创建出来的响应式对象，转换为普通对象，只不过这个对象上的每个属性节点，都是ref()类型的响应式数据(ref底层是reactive 会包装 Proxy)
常见应⽤场景如下：
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 }
vuejson转对象
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。