【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);
    
1
2
3
4
5
6
7
8
9
10
11
12

toRef简介

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

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

错误案例

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

✨$踩坑不易，还希望各位大佬支持一下$

📃 $个人主页：$ 沉默小管

📃 $个人网站：$ 沉默小管

📃 $个人导航网站：$ 沉默小管导航网

📃 $我的开源项目：$ vueCms.cn

🔥 $技术交流QQ群：837051545$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教