vue3的ref、isRef、toRef、toRefs、toRaw詳細介紹
ref、isRef、toRef、toRefs、toRaw看著一堆類似的東西，一個頭兩個大，今天整理一篇文章詳細介紹它們的功能及區(qū)別。
1、ref
ref 屬性除了能夠獲取元素外，也可以使用 ref 函數(shù)，創(chuàng)建一個響應式數(shù)據(jù)，當數(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)) //false3、toRef
創(chuàng)建一個 ref 對象，其 value 值指向另一個對象中的某個屬性。
toRef(obj, key) 將對象中的某個值轉化為響應式數(shù)據(jù)，分為兩種情況：
- toRef 定義原始非響應式數(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ù)響應式數(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 用來解構 ref、reactive 包裹的響應式數(shù)據(jù)。接收一個對象作為參數(shù)，遍歷對象上的所有屬性，將對象上的所有屬性變成響應式數(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 解構數(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 解構對象某個屬性時，先檢查對象上是否存在該屬性，如果存在就繼承對象上的屬性值，如果不存在就會創(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
將響應式對象轉為原始對象。做一些不想被監(jiān)聽的事情，從 ref 或 reactive 得到原始數(shù)據(jù)。
修改原響應式數(shù)據(jù)時，toRaw 轉換得到的數(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)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。如果你想了解更多相關內(nèi)容請查看下面相關鏈接
相關文章
這篇文章主要介紹了vue打包(hash和history)部署詳細步驟,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue 的 keep-alive 是一個內(nèi)置組件,用于緩存不活動的組件實例,避免重復渲染,從而優(yōu)化應用性能,下面就跟隨小編一起來看看其核心實現(xiàn)原理和緩存內(nèi)容吧2025-03-03
如何使用Vue3.2+Vite2.7從0快速打造一個UI組件庫
構建工具使用vue3推薦的vite,下面這篇文章主要給大家介紹了關于如何使用Vue3.2+Vite2.7從0快速打造一個UI組件庫的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
Vue 配合eiement動態(tài)路由,權限驗證的方法
今天小編就為大家分享一篇Vue 配合eiement動態(tài)路由,權限驗證的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
VUE3中引入.env下的環(huán)境變量,顯示process未定義問題
這篇文章主要介紹了VUE3中引入.env下的環(huán)境變量,顯示process未定義問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了vue中怎么區(qū)分不同的環(huán)境，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章教大家如何分分鐘玩轉Vue.js組件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。這篇文章主要介紹了web前端vue：vuex單獨一文件使用方式,需要的朋友可以參考下2018-01-01
vue/cli3.0腳手架部署到nginx時頁面空白的問題及解決
這篇文章主要介紹了vue/cli3.0腳手架部署到nginx時頁面空白的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3+vite+移動端webview打包后頁面加載空白問題解決辦法
這篇文章主要給大家介紹了關于vue3+vite+移動端webview打包后頁面加載空白問題的解決辦法,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-06-06