Vue3響應式函數對比：toRef() vs 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轉換為響應式資料能力
總結
這個toRef()與toRefs()是非常實用的,都是將一個非響應式資料變為一個具備響應式資料能力,與源物件可保持資料的同步,具備參照關係,前者只支援單個屬性資料的處理,而後者支援資料的批次處理
修改資料時,頁面資料會更新,這兩個composition API函數是非常實用的,在實際業務開發中,如果涉及到修改頁面的資料,那麼就會用到
（學習視訊分享：、）
以上就是Vue3響應式函數對比：toRef() vs toRefs()的詳細內容，更多請關注TW511.COM其它相關文章！