VueJs中toRef與toRefs函數怎么使用

這篇文章主要介紹了VueJs中toRef與toRefs函數怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇VueJs中toRef與toRefs函數怎么使用文章都會有所收獲，下面我們一起來看看吧。

正文

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

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

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

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

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

toRef()函數

作用:創建一個ref對象,其value值指向另一個對象中的某個屬性值,與原對象是存在關聯關系的

也就是基于響應式對象上的一個屬性,創建一個對應的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: '前端開發',
     trade: '互聯網'
   } 
});
</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: '前端開發',
     trade: '互聯網'
   } 
});
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: '前端開發',
     trade: '互聯網'
   } 
});
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: '前端開發',
     trade: '互聯網'
   } 
});
// 想要修改指定哪個對象具備響應式,那么就使用toRef函數處理,toRef(源對象,源對象下的某個屬性)
const name = toRef(person，'name');  
const age = toRef(person,'age');
// 經過了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: '前端開發',
     trade: '互聯網'
   } 
});
// 使用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: '前端開發',
     trade: '互聯網'
   } 
});
// 通過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轉換為響應式數據能力

關于“VueJs中toRef與toRefs函數怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“VueJs中toRef與toRefs函數怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。