Vue3響應式函數比較：toRef() vs toRefs()

ref是處理基本資料類型回應式API函數,在setup中宣告定義的變數,可以直接在模板中使用

沒有被響應式API包裹處理的變數資料,是不具備響應式能力的

也就是往往在邏輯中修改了數據,但是頁面不會更新,那怎麼樣將一個非響應式資料變成響應式資料

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

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

toRef()函數

作用:建立一個ref物件,其value值指向另一個物件中的某個屬性值,與原始物件是存在關聯關係的。 【相關推薦：vuejs影片教學、web前端開發】

#也就是基於響應式物件上的一個屬性,建立一個對應的ref,這樣建立的ref與它的來源屬性是保持同步的,與來源物件存在引用關係

改變來源屬性的值將更新ref#的值

語法: const 變數名稱= toRef(來源物件,來源物件下的某個屬性)

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

#應用: 要將回應式物件中的某個屬性單獨提供給外部使用時,不想丟失響應式,把一個prop的ref傳遞給一個組合式函數也會很有用

缺點：toRef ()只能處理一個屬性,但是toRefs(來源物件),卻可以一次批次處理

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});
</script>

那在範本當中想要渲染資料可以這麼寫

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

如果不想在模板當中,寫那麼長,那麼可以先解構,如下所示

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

const { name, age} = person;
const { web,trade} = person.job;
</script>

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

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

現在,如果我們想要去修改變數資料,會發現,邏輯中的資料會被修改,但是頁面中的資料不會更新,也就是遺失了回應式例如:如下範本,分別修改名字,年齡屬性

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

那在邏輯程式碼中

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

const { name, age} = person;
const { web,trade} = person.job;

// 这样直接操作数据是无法修改的,因为它不是一个响应式数据,只是一个纯字符串,不具备响应式
function handleChangeAttrs() {
    name = "itclanCoder";
    age = 20;
}
</script>

如果想要修改資料,支援響應式,將一個非響應式資料,變成一個響應式資料,需要藉用toRef(來源物件,來源物件下指定的屬性)函數,如下所示

<script setup>
import { reactive,toRef } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

// 想要修改指定哪个对象具备响应式,那么就使用toRef函数处理,toRef(源对象,源对象下的某个属性)
const name = toRef(person，&#39;name&#39;);  
const age = toRef(person,&#39;age&#39;);

// 经过了toRef的处理,修改变量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

在範本當中,仍然是如上所示

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

你會發現使用toRef() 函數處理後,非響應式資料就具備響應式資料的能力了的,而且源資料也會同步

如果只是用於純資料頁面的展示,那是沒有必要將資料轉化為響應式資料的,如果需要修改資料,那麼就需要將非響應式資料轉換為響應式資料

是透過toRef()函數實現的

與ref的不同

如果你用ref處理資料的話,如下所示,使用ref處理資料,頁面也能實現資料的響應式,更新,但是它與toRef是不同,有區別的

<script setup>
import { reactive,toRef } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

// 使用ref
const name = ref(person.name);  
const age = toRef(person.age);

// 经过了toRef的处理,修改变量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

修改資料,頁面資料會更新,但是來源資料不會同步,修改,並無引用關係,ref相當於是對來源物件重新拷貝一份資料ref()接收到的是一個純數值

toRefs()函數

toRef() 只能處理來源物件指定的某個屬性,如果來源物件屬性很多,一個一個的使用toRef()處理會顯得比較麻煩

那麼這個toRefs ()就很有用了,它與toRef()的功能一致,可以批量創建多個ref對象,並且能與源對象保持同步,有引用關係

語法:toRefs(來源物件),toRefs(person)

如上面的範例程式碼,修改為toRefs()所示

<script setup>
import { reactive,toRefs } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

// 通过toRefs()批量处理,此时通过解构
const {name,age} = toRefs(person);  

// 经过了toRef的处理,修改变量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

當從組合式函數中傳回響應式物件時，toRefs 是很有用的。使用它，消費者元件可以解構/展開回傳的物件而不會失去回應性

import { toRefs } from "vue";
function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // 在返回时都转为ref
  return toRefs(state)
}

// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX()

注意事項

toRefs 在呼叫時只會為來源物件上可以列舉的屬性建立ref。如果要為可能還不存在的屬性建立ref，則改用toRef

#為啥需要toRef()與toRefs()函數

#目的：在保證不遺失響應式的前提下，把物件解構，方便物件資料分解與擴散

前提：針對的是響應式對象（reactive封裝的）非普通物件

注意：不創造響應式（那是reactive的事情),它本身只是延續響應式,讓一個非響應式資料透過toRef或toRefs轉換為響應式資料能力

總結

這個toRef()與toRefs()是非常實用的,都是將一個非響應式資料變成一個具備響應式數據能力,與來源物件可保持資料的同步,具備引用關係,前者只支援單一屬性資料的處理,而後者支援資料的批次處理

修改資料時,頁面資料會更新,這兩個composition API函數是非常實用的,在實際業務開發中,如果涉及到修改頁面的資料,那麼就會用到

（學習影片分享：vuejs入門教學、程式設計基礎影片）

以上是Vue3響應式函數比較：toRef() vs toRefs()的詳細內容。更多資訊請關注PHP中文網其他相關文章！