【Vue3】toRefs与toRef的使用

---

toRefs简介

toRefs对对象内多个值转换成响应式数据
代码展示

 let testData = reactive({
        aa:"111",
        bb:"222",
        cc:"333"
    })
    //转为响应式数据
    let {aa,bb,cc} = toRefs(testData)
    
    console.log(aa);
    console.log(bb);
    console.log(cc);
    

toRef简介

toRef对对象内单个值转换成响应式数据

let testData1 = reactive({
        aa:"111",
        bb:"222",
        cc:"333"
    })
    //转为响应式数据
    let newData = toRef(testData1,'aa')
    console.log(newData);//222

错误案例

let testData1 = reactive({
        aa:"111",
        bb:"222",
        cc:"333"
    })
    //直接解构testData对象,创建的新值是没有响应式效果
    let {aa,bb,cc} = testData