ref
是處理基本資料類型回應式API
函數,在setup
中宣告定義的變數,可以直接在模板中使用
沒有被響應式API
包裹處理的變數資料,是不具備響應式能力的
也就是往往在邏輯中修改了數據,但是頁面不會更新,那怎麼樣將一個非響應式資料變成響應式資料
就需要用到toRef()
與toRefs()
這兩個componsition API
的
單純的去看概念,往往比較抽象,是難以理解的,還是需要從具體的實例出發
作用:建立一個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
處理資料,頁面也能實現資料的響應式,更新,但是它與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()
接收到的是一個純數值
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
#目的:在保證不遺失響應式的前提下,把物件解構,方便物件資料分解與擴散
前提:針對的是響應式對象(reactive
封裝的)非普通物件
注意:不創造響應式(那是reactive
的事情),它本身只是延續響應式,讓一個非響應式資料透過toRef
或toRefs
轉換為響應式資料能力
這個toRef()
與toRefs()
是非常實用的,都是將一個非響應式資料變成一個具備響應式數據能力,與來源物件可保持資料的同步,具備引用關係,前者只支援單一屬性資料的處理,而後者支援資料的批次處理
修改資料時,頁面資料會更新,這兩個composition API
函數是非常實用的,在實際業務開發中,如果涉及到修改頁面的資料,那麼就會用到
以上是Vue3響應式函數比較:toRef() vs toRefs()的詳細內容。更多資訊請關注PHP中文網其他相關文章!