vue3?中的toRef函數(shù)和toRefs函數(shù)的基本使用
這篇我們看下toRef和toRefs的基本使用
我們知道ref可以用于創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù),而toRef也可以創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù),那他們之間有什么區(qū)別呢?
事實(shí)上,如果利用ref函數(shù)將某個(gè)對象中的屬性變成響應(yīng)式數(shù)據(jù),修改響應(yīng)式數(shù)據(jù)是不會影響到原始數(shù)據(jù)。
import {ref} from 'vue'; export default { name:'App' setup(){ let obj = {name : 'alice', age : 12}; let newObj= ref(obj.name); function change(){ newObj.value = 'Tom'; console.log(obj,newObj) } return {newObj,change} } }
上述代碼,當(dāng)change執(zhí)行的時(shí)候,響應(yīng)式數(shù)據(jù)發(fā)生改變,而原始數(shù)據(jù)obj并不會改變。
原因在于,ref的本質(zhì)是拷貝,與原始數(shù)據(jù)沒有引用關(guān)系
需要注意ref(obj.name)相當(dāng)于ref('alice')相當(dāng)于reactive({value:'alice'})
所以在修改數(shù)據(jù)時(shí),是修改newObj.value=xxx
而如果使用toRef將某個(gè)對象中的屬性變成響應(yīng)式數(shù)據(jù),修改響應(yīng)式數(shù)據(jù)是會影響到原始數(shù)據(jù)的。但是需要注意,如果修改通過toRef創(chuàng)建的響應(yīng)式數(shù)據(jù),并不會觸發(fā)UI界面的更新。
所以,toRef的本質(zhì)是引用,與原始數(shù)據(jù)有關(guān)聯(lián)
import {toRef} from 'vue'; export default { name:'App' setup(){ let obj = {name : 'alice', age : 12}; let newObj= toRef(obj, 'name'); function change(){ newObj.value = 'Tom'; console.log(obj,newObj) } return {newObj,change} } }
上述代碼,當(dāng)change執(zhí)行的時(shí)候,響應(yīng)式數(shù)據(jù)發(fā)生改變,原始數(shù)據(jù)obj并不會改變,但是UI界面不會更新
小結(jié):
ref和toRef的區(qū)別
(1). ref本質(zhì)是拷貝,修改響應(yīng)式數(shù)據(jù)不會影響原始數(shù)據(jù);toRef的本質(zhì)是引用關(guān)系,修改響應(yīng)式數(shù)據(jù)會影響原始數(shù)據(jù)
(2). ref數(shù)據(jù)發(fā)生改變,界面會自動(dòng)更新;toRef當(dāng)數(shù)據(jù)發(fā)生改變是,界面不會自動(dòng)更新
(3). toRef傳參與ref不同;toRef接收兩個(gè)參數(shù),第一個(gè)參數(shù)是哪個(gè)對象,第二個(gè)參數(shù)是對象的哪個(gè)屬性
所以如果想讓響應(yīng)式數(shù)據(jù)和以前的數(shù)據(jù)關(guān)聯(lián)起來,并且想在更新響應(yīng)式數(shù)據(jù)的時(shí)候不更新UI,那么就使用toRef
有的時(shí)候,我們希望將對象的多個(gè)屬性都變成響應(yīng)式數(shù)據(jù),并且要求響應(yīng)式數(shù)據(jù)和原始數(shù)據(jù)關(guān)聯(lián),并且更新響應(yīng)式數(shù)據(jù)的時(shí)候不更新界面,就可以使用toRefs,用于批量設(shè)置多個(gè)數(shù)據(jù)為響應(yīng)式數(shù)據(jù)。(toRef一次僅能設(shè)置一個(gè)數(shù)據(jù))
toRefs接收一個(gè)對象作為參數(shù),它會遍歷對象身上的所有屬性,然后挨個(gè)調(diào)用toRef執(zhí)行
例如
import {toRefs} from 'vue'; export default { name:'App' setup(){ let obj = {name : 'alice', age : 12}; let newObj= toRefs(obj); function change(){ newObj.name.value = 'Tom'; newObj.age.value = 18; console.log(obj,newObj) } return {newObj,change} } }
Vue3的toRef
更改person.age的值時(shí),
通過ref(person.age)得到的age1不會改變,因?yàn)閞ef是復(fù)制,拷貝了一份新的數(shù)據(jù)值單獨(dú)操作, 更新時(shí)相互不影響
通過toRef(person,‘age’)得到的age2會改變,因?yàn)?toRef是引用。它為源響應(yīng)式對象上的某個(gè)屬性創(chuàng)建一個(gè) ref對象, 二者內(nèi)部操作的是同一個(gè)數(shù)據(jù)值, 更新時(shí)二者是同步的
? setup() { ? ? let person =reactive( { name: "long",age:23 }); ? ? let age1 = ref(person.age); ? ? let age2=toRef(person,'age') ? ? const change1 = () => { ? ? ? person.age++ ? ? }; ? ? return { ? ? ? age1, ? ? ? age2, ? ? ? change1, ? ? }; ? },
應(yīng)用: 當(dāng)要將 某個(gè)prop 的 ref 傳遞給復(fù)合函數(shù)時(shí),toRef 很有用
useFeatureX函數(shù)需要使用props中的foo屬性,且foo要為ref。
? setup (props, context) { ? ? const length = useFeatureX(toRef(props, 'foo')) ? ? return { ? ? ? length ? ? } ? }
到此這篇關(guān)于vue3 toRef函數(shù)和toRefs函數(shù)的文章就介紹到這了,更多相關(guān)vue3 toRef和toRefs函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue項(xiàng)目中使用websocket的實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目中使用websocket的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01vue3實(shí)現(xiàn)國際化的過程與遇到的問題詳解
像很多大型的網(wǎng)址,特別是跨國際等公司網(wǎng)頁,訪問來自世界各地用戶,所以網(wǎng)頁的國際化極其重要的需求,這篇文章主要給大家介紹了關(guān)于vue3實(shí)現(xiàn)國際化的過程與遇到的問題的相關(guān)資料,需要的朋友可以參考下2022-05-05vue自定義標(biāo)簽和單頁面多路由的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue自定義標(biāo)簽和單頁面多路由的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05Vue使用ajax(axios)請求后臺數(shù)據(jù)的方法教程
在vue中經(jīng)常會用到數(shù)據(jù)請求,下面這篇文章主要給大家介紹了關(guān)于Vue使用ajax(axios)請求后臺數(shù)據(jù)的方法教程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11如何利用vscode-icons-js在Vue3項(xiàng)目中實(shí)現(xiàn)文件圖標(biāo)展示
在開發(fā)文件管理系統(tǒng)或類似的項(xiàng)目時(shí),我們常常需要根據(jù)文件類型展示對應(yīng)的文件圖標(biāo),這樣可以提高用戶體驗(yàn),本文將介紹如何在Vue3項(xiàng)目中利用vscode-icons-js庫,實(shí)現(xiàn)類似VSCode的文件圖標(biāo)展示效果,感興趣的朋友一起看看吧2024-08-08把vue-router和express項(xiàng)目部署到服務(wù)器的方法
下面小編就為大家分享一篇把vue-router和express項(xiàng)目部署到服務(wù)器的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02