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: '前端开发',
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函數是非常實用的,在實際業務開發中,如果涉及到修改頁面的資料,那麼就會用到
（學習影片分享：vuejs入門教學、程式設計基礎影片）
以上是Vue3響應式函數比較：toRef() vs toRefs()的詳細內容。更多資訊請關注PHP中文網其他相關文章！
