vue3?中的toRef函數(shù)和toRefs函數(shù)的基本使用
這篇我們看下toRef和toRefs的基本使用
我們知道ref可以用于創(chuàng)建一個響應式數(shù)據(jù),而toRef也可以創(chuàng)建一個響應式數(shù)據(jù),那他們之間有什么區(qū)別呢?
事實上,如果利用ref函數(shù)將某個對象中的屬性變成響應式數(shù)據(jù),修改響應式數(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} } }
上述代碼,當change執(zhí)行的時候,響應式數(shù)據(jù)發(fā)生改變,而原始數(shù)據(jù)obj并不會改變。
原因在于,ref的本質是拷貝,與原始數(shù)據(jù)沒有引用關系
需要注意ref(obj.name)相當于ref('alice')相當于reactive({value:'alice'})
所以在修改數(shù)據(jù)時,是修改newObj.value=xxx
而如果使用toRef將某個對象中的屬性變成響應式數(shù)據(jù),修改響應式數(shù)據(jù)是會影響到原始數(shù)據(jù)的。但是需要注意,如果修改通過toRef創(chuàng)建的響應式數(shù)據(jù),并不會觸發(fā)UI界面的更新。
所以,toRef的本質是引用,與原始數(shù)據(jù)有關聯(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} } }
上述代碼,當change執(zhí)行的時候,響應式數(shù)據(jù)發(fā)生改變,原始數(shù)據(jù)obj并不會改變,但是UI界面不會更新
小結:
ref和toRef的區(qū)別
(1). ref本質是拷貝,修改響應式數(shù)據(jù)不會影響原始數(shù)據(jù);toRef的本質是引用關系,修改響應式數(shù)據(jù)會影響原始數(shù)據(jù)
(2). ref數(shù)據(jù)發(fā)生改變,界面會自動更新;toRef當數(shù)據(jù)發(fā)生改變是,界面不會自動更新
(3). toRef傳參與ref不同;toRef接收兩個參數(shù),第一個參數(shù)是哪個對象,第二個參數(shù)是對象的哪個屬性
所以如果想讓響應式數(shù)據(jù)和以前的數(shù)據(jù)關聯(lián)起來,并且想在更新響應式數(shù)據(jù)的時候不更新UI,那么就使用toRef
有的時候,我們希望將對象的多個屬性都變成響應式數(shù)據(jù),并且要求響應式數(shù)據(jù)和原始數(shù)據(jù)關聯(lián),并且更新響應式數(shù)據(jù)的時候不更新界面,就可以使用toRefs,用于批量設置多個數(shù)據(jù)為響應式數(shù)據(jù)。(toRef一次僅能設置一個數(shù)據(jù))
toRefs接收一個對象作為參數(shù),它會遍歷對象身上的所有屬性,然后挨個調用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的值時,
通過ref(person.age)得到的age1不會改變,因為ref是復制,拷貝了一份新的數(shù)據(jù)值單獨操作, 更新時相互不影響
通過toRef(person,‘age’)得到的age2會改變,因為 toRef是引用。它為源響應式對象上的某個屬性創(chuàng)建一個 ref對象, 二者內部操作的是同一個數(shù)據(jù)值, 更新時二者是同步的
? 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, ? ? }; ? },
應用: 當要將 某個prop 的 ref 傳遞給復合函數(shù)時,toRef 很有用
useFeatureX函數(shù)需要使用props中的foo屬性,且foo要為ref。
? setup (props, context) { ? ? const length = useFeatureX(toRef(props, 'foo')) ? ? return { ? ? ? length ? ? } ? }
到此這篇關于vue3 toRef函數(shù)和toRefs函數(shù)的文章就介紹到這了,更多相關vue3 toRef和toRefs函數(shù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue使用ajax(axios)請求后臺數(shù)據(jù)的方法教程
在vue中經常會用到數(shù)據(jù)請求,下面這篇文章主要給大家介紹了關于Vue使用ajax(axios)請求后臺數(shù)據(jù)的方法教程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11如何利用vscode-icons-js在Vue3項目中實現(xiàn)文件圖標展示
在開發(fā)文件管理系統(tǒng)或類似的項目時,我們常常需要根據(jù)文件類型展示對應的文件圖標,這樣可以提高用戶體驗,本文將介紹如何在Vue3項目中利用vscode-icons-js庫,實現(xiàn)類似VSCode的文件圖標展示效果,感興趣的朋友一起看看吧2024-08-08把vue-router和express項目部署到服務器的方法
下面小編就為大家分享一篇把vue-router和express項目部署到服務器的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02