ref是處理基本數(shù)據(jù)類型響應式API函數(shù),在setup中聲明定義的變量,可以直接在模板中使用
【資料圖】
沒有被響應式API包裹處理的變量數(shù)據(jù),是不具備響應式能力的
也就是往往在邏輯中修改了數(shù)據(jù),但是頁面不會更新,那怎么樣將一個非響應式數(shù)據(jù)變成響應式數(shù)據(jù)
就需要用到toRef()與toRefs()這兩個componsition API的
單純的去看概念,往往比較抽象,是難以理解的,還是需要從具體的實例出發(fā)
作用:創(chuàng)建一個ref對象,其value值指向另一個對象中的某個屬性值,與原對象是存在關聯(lián)關系的?！鞠嚓P推薦：vuejs視頻教程、web前端開發(fā)】
也就是基于響應式對象上的一個屬性,創(chuàng)建一個對應的ref,這樣創(chuàng)建的ref與它的源屬性是保持同步的,與源對象存在引用關系
改變源屬性的值將更新ref的值
語法: const變量名 = toRef(源對象,源對象下的某個屬性)
如:const name = toRef(person,"name")
應用: 要將響應式對象中的某個屬性單獨提供給外部使用時,不想丟失響應式,把一個prop的ref傳遞給一個組合式函數(shù)也會很有用
缺點：toRef()只能處理一個屬性,但是toRefs(源對象),卻可以一次性批量處理
<script setup>import { reactive } from "vue";const person = reactive({ name:"川川", age: 18, job: { web: "前端開發(fā)", trade: "互聯(lián)網(wǎng)" } });</script>那在模板當中想要渲染數(shù)據(jù)可以這么寫
{{person.name}} -{{person.age}}-{{person.job.web}}-{{person.job.trade}}如果不想在模板當中,寫那么長,那么可以先解構,如下所示
<script setup>import { reactive } from "vue";const person = reactive({ name:"川川", age: 18, job: { web: "前端開發(fā)", trade: "互聯(lián)網(wǎng)" } });const { name, age} = person;const { web,trade} = person.job;</script>那在模板中,可以直接使用變量的,如下所示
{{name}}-{{age}}-{{web}}-{{trade}}現(xiàn)在,如果我們想要去修改變量數(shù)據(jù),會發(fā)現(xiàn),邏輯中的數(shù)據(jù)會被修改,但是頁面中的數(shù)據(jù)不會更新,也就是丟失了響應式 比如:如下模板,分別修改名字,年齡屬性
<button @click="handleChangeAttrs">修改屬性</button>
那在邏輯代碼中
<script setup>import { reactive } from "vue";const person = reactive({ name:"川川", age: 18, job: { web: "前端開發(fā)", trade: "互聯(lián)網(wǎng)" } });const { name, age} = person;const { web,trade} = person.job;// 這樣直接操作數(shù)據(jù)是無法修改的,因為它不是一個響應式數(shù)據(jù),只是一個純字符串,不具備響應式function handleChangeAttrs() { name = "itclanCoder"; age = 20;}</script>如果想要修改數(shù)據(jù),支持響應式,將一個非響應式數(shù)據(jù),變成一個響應式數(shù)據(jù),需要借用toRef(源對象,源對象下指定的屬性)函數(shù),如下所示
<script setup>import { reactive,toRef } from "vue";const person = reactive({ name:"川川", age: 18, job: { web: "前端開發(fā)", trade: "互聯(lián)網(wǎng)" } });// 想要修改指定哪個對象具備響應式,那么就使用toRef函數(shù)處理,toRef(源對象,源對象下的某個屬性)const name = toRef(person，"name"); const age = toRef(person,"age");// 經(jīng)過了toRef的處理,修改變量的值,那么就需要xx.valuefunction handleChangeAttrs() { name.value = "itclanCoder"; age.value = 20;}</script>在模板當中,仍然是如上所示
{{person}}{{name}}-{{age}}-{{web}}-{{trade}}<button @click="handleChangeAttrs">修改屬性</button>你會發(fā)現(xiàn)使用toRef()函數(shù)處理后,非響應式數(shù)據(jù)就具備響應式數(shù)據(jù)的能力了的,而且源數(shù)據(jù)也會同步
如果只是用于純數(shù)據(jù)頁面的展示,那是沒有必要將數(shù)據(jù)轉化為響應式數(shù)據(jù)的,如果需要修改數(shù)據(jù),那么就需要將非響應式數(shù)據(jù)轉化為響應式數(shù)據(jù)
是通過toRef()函數(shù)實現(xiàn)的
如果你用ref處理數(shù)據(jù)的話,如下所示,使用ref處理數(shù)據(jù),頁面也能實現(xiàn)數(shù)據(jù)的響應式,更新,但是它與toRef是不同,有區(qū)別的
<script setup>import { reactive,toRef } from "vue";const person = reactive({ name:"川川", age: 18, job: { web: "前端開發(fā)", trade: "互聯(lián)網(wǎng)" } });// 使用refconst name = ref(person.name); const age = toRef(person.age);// 經(jīng)過了toRef的處理,修改變量的值,那么就需要xx.valuefunction handleChangeAttrs() { name.value = "itclanCoder"; age.value = 20;}</script>修改數(shù)據(jù),頁面數(shù)據(jù)會更新,但是源數(shù)據(jù)不會同步,修改,并無引用關系,ref相當于是對源對象重新拷貝一份數(shù)據(jù) ref()接收到的是一個純數(shù)值
toRef()只能處理源對象指定的某個屬性,如果源對象屬性很多,一個一個的使用toRef()處理會顯得比較麻煩
那么這個toRefs()就很有用了,它與toRef()的功能一致,可以批量創(chuàng)建多個ref對象,并且能與源對象保持同步,有引用關系
語法:toRefs(源對象),toRefs(person)
如上面的示例代碼,修改為toRefs()所示
<script setup>import { reactive,toRefs } from "vue";const person = reactive({ name:"川川", age: 18, job: { web: "前端開發(fā)", trade: "互聯(lián)網(wǎng)" } });// 通過toRefs()批量處理,此時通過解構const {name,age} = toRefs(person); // 經(jīng)過了toRef的處理,修改變量的值,那么就需要xx.valuefunction handleChangeAttrs() { name.value = "itclanCoder"; age.value = 20;}</script>當從組合式函數(shù)中返回響應式對象時，toRefs是很有用的。使用它，消費者組件可以解構/展開返回的對象而不會失去響應性
import { toRefs } from "vue";function useFeatureX() { const state = reactive({ foo: 1, bar: 2 }) // 在返回時都轉為ref return toRefs(state)}// 可以解構而不會失去響應性const { foo, bar } = useFeatureX()注意事項
toRefs在調用時只會為源對象上可以枚舉的屬性創(chuàng)建 ref。如果要為可能還不存在的屬性創(chuàng)建 ref，則改用 toRef
目的：在保證不丟失響應式的前提下，把對象進行解構，方便對象數(shù)據(jù)分解和擴散
前提：針對的是響應式對象（reactive封裝的）非普通對象
注意：不創(chuàng)造響應式（那是reactive的事情),它本身只是延續(xù)響應式,讓一個非響應式數(shù)據(jù)通過toRef或toRefs轉換為響應式數(shù)據(jù)能力
這個toRef()與toRefs()是非常實用的,都是將一個非響應式數(shù)據(jù)變?yōu)橐粋€具備響應式數(shù)據(jù)能力,與源對象可保持數(shù)據(jù)的同步,具備引用關系,前者只支持單個屬性數(shù)據(jù)的處理,而后者支持數(shù)據(jù)的批量處理
修改數(shù)據(jù)時,頁面數(shù)據(jù)會更新,這兩個composition API函數(shù)是非常實用的,在實際業(yè)務開發(fā)中,如果涉及到修改頁面的數(shù)據(jù),那么就會用到
（學習視頻分享：vuejs入門教程、編程基礎視頻）
以上就是Vue3響應式函數(shù)對比：toRef() vs toRefs()的詳細內容，更多請關注php中文網(wǎng)其它相關文章！
關鍵詞：
營業(yè)執(zhí)照公示信息