vue3的ref、isRef、toRef、toRefs、toRaw詳細(xì)介紹
ref、isRef、toRef、toRefs、toRaw看著一堆類似的東西,一個頭兩個大,今天整理一篇文章詳細(xì)介紹它們的功能及區(qū)別。
1、ref
ref 屬性除了能夠獲取元素外,也可以使用 ref 函數(shù),創(chuàng)建一個響應(yīng)式數(shù)據(jù),當(dāng)數(shù)據(jù)值發(fā)生改變時,視圖自動更新。
<script lang="ts" setup> import { ref } from 'vue' let str: string = ref('我是張三') const chang = () => { str.value = '我是鉆石王老五' console.log(str.value) } </script> <template> <div> {{ str }} <button type="button" @click="chang">修改值</button> </div> </template>
2、isRef
檢查變量是否為一個被 ref 包裝過的對象,如果是返回 true ,否則返回 false。
import { ref, isRef, reactive } from 'vue' let str: string = ref('我是張三') let num: number = 1 let per = reactive({ name: '代碼女神', work: '程序媛' }) console.log('strRes', isRef(str)) //true console.log('numRes', isRef(num)) //false console.log('perRes', isRef(per)) //false
3、toRef
創(chuàng)建一個 ref 對象,其 value 值指向另一個對象中的某個屬性。
toRef(obj, key) 將對象中的某個值轉(zhuǎn)化為響應(yīng)式數(shù)據(jù),分為兩種情況:
- toRef 定義原始非響應(yīng)式數(shù)據(jù),修改值時,原始數(shù)據(jù)和 copy 數(shù)據(jù)都會變的,但是視圖不更新。
<script> import { ref, isRef, toRef, reactive } from 'vue' let obj = { name: '姓名', age: 18, } let name: string = toRef(obj, 'name') const chang = () => { obj.name = '鉆石王老五' name.value = '李四' console.log(obj.name) // 李四 console.log('name', name) // 李四 } //chang() //DOM掛載前調(diào)用 </script> <template> <div> {{ obj.name }} ------- {{ name }} <button type="button" @click="chang">修改值</button> </div> </template>
注意:如果是在 DOM 掛載之前調(diào)用 chang 方法,改變數(shù)值,此時數(shù)據(jù)和視圖都會發(fā)生改變。
- toRef 定義原始數(shù)據(jù)響應(yīng)式數(shù)據(jù),修改值時,原始數(shù)據(jù),和 copy 數(shù)據(jù)都會改變,視圖也會更新。
<script> import { ref, isRef, toRef, reactive } from 'vue' let obj = reactive({ name: '姓名', age: 18, }) let name: string = toRef(obj, 'name') const chang = () => { obj.name = '鉆石王老五' name.value = '李四' } </script> <template> <div> {{ obj.name }} ------- {{ name }} <button type="button" @click="chang">修改值</button> </div> </template>
最終值為 “李四”。
4、toRefs
toRefs 用來解構(gòu) ref、reactive 包裹的響應(yīng)式數(shù)據(jù)。接收一個對象作為參數(shù),遍歷對象上的所有屬性,將對象上的所有屬性變成響應(yīng)式數(shù)據(jù)。
let obj = reactive({ name: '姓名', age: 18, }) let { name, age } = toRefs(obj) const chang = () => { name.value = '鉆石王老五' age.value++ } </script> <template> <div> {{ name }} ------- {{ age }} <button type="button" @click="chang">修改值</button> </div> </template>
toRefs 解構(gòu)數(shù)據(jù)時,如果某些參數(shù)作為可選參數(shù),可選參數(shù)不存在時就會報錯,如:
let obj = reactive({ name: '姓名', age: 18, }) let { name, age, work } = toRefs(obj) const chang = () => { name.value = '鉆石王老五' age.value++ console.log('work', work.value) work.value = '程序媛' }
此時可以使用 toRef 解決此問題,使用 toRef 解構(gòu)對象某個屬性時,先檢查對象上是否存在該屬性,如果存在就繼承對象上的屬性值,如果不存在就會創(chuàng)建一個。
修改上邊的代碼為:
let obj = reactive({ name: '姓名', age: 18, }) let { name, age } = toRefs(obj) let work = toRef(obj, 'work') const chang = () => { name.value = '鉆石王老五' age.value++ console.log('work', work.value) work.value = '程序媛' }
5、toRaw
將響應(yīng)式對象轉(zhuǎn)為原始對象。做一些不想被監(jiān)聽的事情,從 ref 或 reactive 得到原始數(shù)據(jù)。
修改原響應(yīng)式數(shù)據(jù)時,toRaw 轉(zhuǎn)換得到的數(shù)據(jù)會被修改,視圖也會更新,如:
<script lang="ts" setup> import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue' let obj = reactive({ name: '姓名', age: 18, }) let newObj = toRaw(obj) const chang = () => { obj.name = '鉆石王老五' obj.age++ } </script> <template> <div> {{ obj.name }} ------- {{ obj.age }} <button type="button" @click="chang">修改值</button> <br /> {{ newObj }} </div> </template>
如果修改 toRaw 得到的原始數(shù)據(jù),原數(shù)據(jù)也會被修改,但是視圖不更新。如:
<script lang="ts" setup> import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue' let obj = reactive({ name: '姓名', age: 18, }) let newObj = toRaw(obj) const chang = () => { obj.name = '鉆石王老五' obj.age++ } const changNew = () => { newObj.name = '搞笑' console.log('newObj', newObj) console.log('obj', obj) } </script> <template> <div> {{ obj.name }} ------- {{ obj.age }} <button type="button" @click="chang">修改值</button> <br /> {{ newObj }} <button @click="changNew">修改</button> </div> </template>
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
相關(guān)文章
vue + canvas實(shí)現(xiàn)涂鴉面板的示例代碼
這篇文章主要給大家介紹了vue + canvas實(shí)現(xiàn)涂鴉面板的示例,文章通過代碼示例介紹的非常詳細(xì),感興趣的小伙伴跟著小編一起來看看吧2023-08-08通過vue.extend實(shí)現(xiàn)消息提示彈框的方法記錄
這篇文章主要給大家介紹了關(guān)于通過vue.extend實(shí)現(xiàn)消息提示彈框的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01vue 綁定對象,數(shù)組之?dāng)?shù)據(jù)無法動態(tài)渲染案例詳解
這篇文章主要介紹了vue 綁定對象,數(shù)組之?dāng)?shù)據(jù)無法動態(tài)渲染案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-09-09vue3?setup中父組件通過Ref調(diào)用子組件的方法(實(shí)例代碼)
這篇文章主要介紹了vue3?setup中父組件通過Ref調(diào)用子組件的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08VUE2.0+Element-UI+Echarts封裝的組件實(shí)例
下面小編就為大家分享一篇VUE2.0+Element-UI+Echarts封裝的組件實(shí)例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03Vue3中的setup語法糖、computed函數(shù)、watch函數(shù)詳解
這篇文章主要介紹了Vue3中的setup語法糖、computed函數(shù)、watch函數(shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解
這篇文章主要為大家介紹了Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11