正文

ref是處理基本數(shù)據(jù)類型響應(yīng)式API函數(shù),在setup中聲明定義的變量,可以直接在模板中使用

沒(méi)有被響應(yīng)式API包裹處理的變量數(shù)據(jù),是不具備響應(yīng)式能力的

也就是往往在邏輯中修改了數(shù)據(jù),但是頁(yè)面不會(huì)更新,那怎么樣將一個(gè)非響應(yīng)式數(shù)據(jù)變成響應(yīng)式數(shù)據(jù)

就需要用到toRef()與toRefs()這兩個(gè)componsition API的

單純的去看概念,往往比較抽象,是難以理解的,還是需要從具體的實(shí)例出發(fā)

toRef()函數(shù)

作用:創(chuàng)建一個(gè)ref對(duì)象,其value值指向另一個(gè)對(duì)象中的某個(gè)屬性值,與原對(duì)象是存在關(guān)聯(lián)關(guān)系的

也就是基于響應(yīng)式對(duì)象上的一個(gè)屬性,創(chuàng)建一個(gè)對(duì)應(yīng)的ref,這樣創(chuàng)建的ref與它的源屬性是保持同步的,與源對(duì)象存在引用關(guān)系

改變?cè)磳傩缘闹祵⒏?code>ref的值

語(yǔ)法: const 變量名 = toRef(源對(duì)象,源對(duì)象下的某個(gè)屬性)

如:const name = toRef(person,'name')

應(yīng)用: 要將響應(yīng)式對(duì)象中的某個(gè)屬性單獨(dú)提供給外部使用時(shí),不想丟失響應(yīng)式,把一個(gè)prop的ref傳遞給一個(gè)組合式函數(shù)也會(huì)很有用

缺點(diǎn)：toRef()只能處理一個(gè)屬性,但是toRefs(源對(duì)象),卻可以一次性批量處理

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: '前端開(kāi)發(fā)',
     trade: '互聯(lián)網(wǎng)'
   } 
});
</script>

那在模板當(dāng)中想要渲染數(shù)據(jù)可以這么寫(xiě)

{{person.name}} -{{person.age}}-{{person.job.web}}-{{person.job.trade}}

如果不想在模板當(dāng)中,寫(xiě)那么長(zhǎng),那么可以先解構(gòu),如下所示

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: '前端開(kāi)發(fā)',
     trade: '互聯(lián)網(wǎng)'
   } 
});
const { name, age} = person;
const { web,trade} = person.job;
</script>

那在模板中,可以直接使用變量的,如下所示

{{name}}-{{age}}-{{web}}-{{trade}}

現(xiàn)在,如果我們想要去修改變量數(shù)據(jù),會(huì)發(fā)現(xiàn),邏輯中的數(shù)據(jù)會(huì)被修改,但是頁(yè)面中的數(shù)據(jù)不會(huì)更新,也就是丟失了響應(yīng)式 比如:如下模板,分別修改名字,年齡屬性

<button @click="handleChangeAttrs">修改屬性</button>

那在邏輯代碼中

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: '前端開(kāi)發(fā)',
     trade: '互聯(lián)網(wǎng)'
   } 
});
const { name, age} = person;
const { web,trade} = person.job;
// 這樣直接操作數(shù)據(jù)是無(wú)法修改的,因?yàn)樗皇且粋€(gè)響應(yīng)式數(shù)據(jù),只是一個(gè)純字符串,不具備響應(yīng)式
function handleChangeAttrs() {
    name = "itclanCoder";
    age = 20;
}
</script>

如果想要修改數(shù)據(jù),支持響應(yīng)式,將一個(gè)非響應(yīng)式數(shù)據(jù),變成一個(gè)響應(yīng)式數(shù)據(jù),需要借用toRef(源對(duì)象,源對(duì)象下指定的屬性)函數(shù),如下所示

<script setup>
import { reactive,toRef } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: '前端開(kāi)發(fā)',
     trade: '互聯(lián)網(wǎng)'
   } 
});
// 想要修改指定哪個(gè)對(duì)象具備響應(yīng)式,那么就使用toRef函數(shù)處理,toRef(源對(duì)象,源對(duì)象下的某個(gè)屬性)
const name = toRef(person，'name');  
const age = toRef(person,'age');
// 經(jīng)過(guò)了toRef的處理,修改變量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

在模板當(dāng)中,仍然是如上所示

{{person}}
{{name}}-{{age}}-{{web}}-{{trade}}
<button @click="handleChangeAttrs">修改屬性</button>

你會(huì)發(fā)現(xiàn)使用toRef()函數(shù)處理后,非響應(yīng)式數(shù)據(jù)就具備響應(yīng)式數(shù)據(jù)的能力了的,而且源數(shù)據(jù)也會(huì)同步

如果只是用于純數(shù)據(jù)頁(yè)面的展示,那是沒(méi)有必要將數(shù)據(jù)轉(zhuǎn)化為響應(yīng)式數(shù)據(jù)的,如果需要修改數(shù)據(jù),那么就需要將非響應(yīng)式數(shù)據(jù)轉(zhuǎn)化為響應(yīng)式數(shù)據(jù)

是通過(guò)toRef()函數(shù)實(shí)現(xiàn)的

與ref的不同

如果你用ref處理數(shù)據(jù)的話,如下所示,使用ref處理數(shù)據(jù),頁(yè)面也能實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)式,更新,但是它與toRef是不同,有區(qū)別的

<script setup>
import { reactive,toRef } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: '前端開(kāi)發(fā)',
     trade: '互聯(lián)網(wǎng)'
   } 
});
// 使用ref
const name = ref(person.name);  
const age = toRef(person.age);
// 經(jīng)過(guò)了toRef的處理,修改變量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

修改數(shù)據(jù),頁(yè)面數(shù)據(jù)會(huì)更新,但是源數(shù)據(jù)不會(huì)同步,修改,并無(wú)引用關(guān)系,ref相當(dāng)于是對(duì)源對(duì)象重新拷貝一份數(shù)據(jù) ref()接收到的是一個(gè)純數(shù)值

toRefs()函數(shù)

toRef()只能處理源對(duì)象指定的某個(gè)屬性,如果源對(duì)象屬性很多,一個(gè)一個(gè)的使用toRef()處理會(huì)顯得比較麻煩

那么這個(gè)toRefs()就很有用了,它與toRef()的功能一致,可以批量創(chuàng)建多個(gè)ref對(duì)象,并且能與源對(duì)象保持同步,有引用關(guān)系

語(yǔ)法:toRefs(源對(duì)象),toRefs(person)

如上面的示例代碼,修改為toRefs()所示

<script setup>
import { reactive,toRefs } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: '前端開(kāi)發(fā)',
     trade: '互聯(lián)網(wǎng)'
   } 
});
// 通過(guò)toRefs()批量處理,此時(shí)通過(guò)解構(gòu)
const {name,age} = toRefs(person);  
// 經(jīng)過(guò)了toRef的處理,修改變量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>   

當(dāng)從組合式函數(shù)中返回響應(yīng)式對(duì)象時(shí)，toRefs 是很有用的。使用它，消費(fèi)者組件可以解構(gòu)/展開(kāi)返回的對(duì)象而不會(huì)失去響應(yīng)性

import { toRefs } from "vue";
function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })
  // 在返回時(shí)都轉(zhuǎn)為ref
  return toRefs(state)
}
// 可以解構(gòu)而不會(huì)失去響應(yīng)性
const { foo, bar } = useFeatureX()

注意事項(xiàng)

toRefs 在調(diào)用時(shí)只會(huì)為源對(duì)象上可以枚舉的屬性創(chuàng)建 ref。如果要為可能還不存在的屬性創(chuàng)建 ref，則改用 toRef

為啥需要toRef()與toRefs()函數(shù)

目的：在保證不丟失響應(yīng)式的前提下，把對(duì)象進(jìn)行解構(gòu)，方便對(duì)象數(shù)據(jù)分解和擴(kuò)散

前提：針對(duì)的是響應(yīng)式對(duì)象（reactive封裝的）非普通對(duì)象

注意：不創(chuàng)造響應(yīng)式（那是reactive的事情),它本身只是延續(xù)響應(yīng)式,讓一個(gè)非響應(yīng)式數(shù)據(jù)通過(guò)toRef或toRefs轉(zhuǎn)換為響應(yīng)式數(shù)據(jù)能力

總結(jié)

這個(gè)toRef()與toRefs()是非常實(shí)用的,都是將一個(gè)非響應(yīng)式數(shù)據(jù)變?yōu)橐粋€(gè)具備響應(yīng)式數(shù)據(jù)能力,與源對(duì)象可保持?jǐn)?shù)據(jù)的同步,具備引用關(guān)系,前者只支持單個(gè)屬性數(shù)據(jù)的處理,而后者支持?jǐn)?shù)據(jù)的批量處理

修改數(shù)據(jù)時(shí),頁(yè)面數(shù)據(jù)會(huì)更新,這兩個(gè)composition API函數(shù)是非常實(shí)用的,在實(shí)際業(yè)務(wù)開(kāi)發(fā)中,如果涉及到修改頁(yè)面的數(shù)據(jù),那么就會(huì)用到

以上就是VueJs中toRef與toRefs函數(shù)對(duì)比詳解的詳細(xì)內(nèi)容，更多關(guān)于VueJs toRef與toRefs函數(shù)對(duì)比的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論