先完丽，我們要知道的是ref、reactive拇舀、toRef逻族、toRefs都屬于VUE3中Composition API的新特性。
響應(yīng)式是什么意思骄崩？
響應(yīng)式是指當(dāng)數(shù)據(jù)改變后聘鳞，Vue 會通知到使用該數(shù)據(jù)的代碼。例如要拂，視圖渲染中使用了數(shù)據(jù)抠璃，數(shù)據(jù)改變后，視圖也會自動更新脱惰。
ref
我們先理解一下最簡單的ref搏嗡。
ref就是把string、Number枪芒、Boolean彻况、Symbol類型的數(shù)據(jù)添加響應(yīng)式
接受一個原始值，返回一個具有響應(yīng)式的對象舅踪，具有value屬性纽甘。他的值就是傳遞的原始值。
修改的話直接修改 xx.value
源數(shù)據(jù)的值不會被更改抽碌，并且數(shù)據(jù)變化會立馬改變HTML
reactive
理解完ref,再來理解一下和ref相對應(yīng)的reactive
reactive也很好理解悍赢，就是傳入對象，把傳入的對象變成響應(yīng)式的對象货徙。增刪改查和深度的增刪改查都會觸發(fā)響應(yīng)式從而改變視圖左权。
但是響應(yīng)式的對象值改變了，原有的數(shù)據(jù)也會被改變痴颊。HTML視圖也會實(shí)時更改
順便說一下ref,也可以接收對象赏迟。源碼會自動判斷傳入的值，如果是對象會自動變成reactive包裹蠢棱。
更新一點(diǎn)小內(nèi)容：關(guān)于reactive如果維護(hù)相關(guān)
實(shí)際使用中锌杀，無法像ref直接使用xx.vule 修改值
修改reactive的值
修改數(shù)組 ：1.使用push方法，增加數(shù)據(jù)泻仙。2.使用splice來刪除某條數(shù)據(jù)糕再。3.使用xx.length來清空數(shù)據(jù)（推薦）/使用遍歷數(shù)據(jù)方法清空數(shù)組 。注意玉转，數(shù)組方法種=[]清空方式不適合用語清空reactive值突想。但是可以用來請清空下面children的值
修改對象：1.直接賦值修改。例如 xx.name=mika
toRef
toRef是用來給抽離響應(yīng)式對象（被reactive包裹的對象）中的某一個屬性的，并且把這個屬性包裹成ref對象猾担，使其和原對象產(chǎn)生鏈接袭灯。
或許有人就回有人有疑問了？這個toRef存在有什么意義呢绑嘹？因?yàn)槲覀冎纑eactive包裹的東西其實(shí)已經(jīng)有了響應(yīng)式了妓蛮，再用toRef什么意義呢？
如圖：我們?nèi)绻獑为?dú)把對象中的某個值拿出來圾叼，如果直接賦值，會斷掉響應(yīng)式（people3）捺癞。就算后面people.name的名字改了夷蚊，但是因?yàn)閿嗟袅隧憫?yīng)式，輸出的還是原有的名字髓介。
而使用toRef會保持對其源 property 的響應(yīng)式連接惕鼓。
并且響應(yīng)是互相的，數(shù)據(jù)源數(shù)據(jù)也會被更改
數(shù)據(jù)會實(shí)時更新到HTML視圖上（這里會更新到html視圖主要還是因?yàn)槭莚eactive包裹了唐础，為什么這么說箱歧，我最后有提到）
有人又會問了，那如果說toRef只是把這個響應(yīng)式對象的屬性包裹成ref對象一膨，那我直接用ref這個對象不就可以了嗎呀邢？何必要用toRef呢。
答：ref是不會去更改原數(shù)據(jù)的豹绪，ref本質(zhì)是拷貝原數(shù)據(jù)价淌，而toRef會修改原數(shù)據(jù)！瞒津！
實(shí)際使用就看自己的了~
toRefs
將響應(yīng)式對象轉(zhuǎn)換為普通對象蝉衣，其中結(jié)果對象的每個 property 都是指向原始對象相應(yīng) property 的 ref*。
這句官方定義我都讀了很久沒太懂啥玩意兒跋矧健病毡？別怕，我給你解釋一下
批量版的toRef
toRef不是只能對象中的一個屬性嘛屁柏，這個可以直接給你整個對象的屬性都一起給整成ref啦膜。
和toRef的區(qū)別，在使用的時候注意要加上xxx.屬性名.value
總結(jié)：toRefs和toRef沒啥區(qū)別前联，就是批量和單個的區(qū)別功戚。也是相互響應(yīng)
關(guān)于ref、reactive和toRef似嗤、toRefs的區(qū)別
ref啸臀、reactive數(shù)據(jù)更新后立馬會更新HTML視圖。
toRef、toRefs更新會后會等下次更新視圖的時候更新視圖
setup() {
let people = reactive({ name: "mika", age: "22" });
let people2 = toRef({ name: "我是變之前的2" }, "name");
let people3 = toRefs({ name: "我是變之前的3" });
const refsclick = () => {
people.name = "我來證明你們變了";
console.log(people.name);
console.log(people2.value);
console.log(people3.name.value);
setTimeout(() => {
people.name = "我來證明你們變了";
people2.value = "我是變之后的2";
people3.name.value = "我是變之后的3";
console.log("--修改后--");
console.log(people.name);
console.log(people2.value);
console.log(people3.name.value);
}, 1000);
};
return { refsclick, people, people2, people3 };
},
變化之前的效果:
點(diǎn)擊后變化之后的輸出和效果：
可以看出來乘粒，即使數(shù)據(jù)已經(jīng)變化了豌注，但是視圖是沒有變化的。
然后我把
people.name = "我來證明你們變了";放到setTimeout里面
總結(jié)：
如果利用toRef灯萍、toRefs將某一個對象中的屬性變成了響應(yīng)式的數(shù)據(jù)(reactive轧铁、ref包裹的數(shù)據(jù))
我們修改響應(yīng)式的數(shù)據(jù)是會影響原始數(shù)據(jù)的
如果數(shù)據(jù)是通過toRef創(chuàng)建的，修改值后旦棉，數(shù)據(jù)不會觸發(fā)視圖齿风，會等下次更新視圖的時候一起更新
以上，差不多應(yīng)該能搞懂這幾個api了绑洛。如有什么問題請留言~
