Vue3中Composition的API用法詳解
一、 Reactive判斷的API
1. isProxy
檢查對(duì)象是否由reactive或者readonly創(chuàng)建的proxy ，返回一個(gè)布爾值
<script setup>
import { reactive, readonly, isProxy } from 'vue'
let foo = readonly({ name: 'WFT1' }) // 其中的屬性不可修改
let bar = reactive({ name: 'WFT2' })
console.log(isProxy(foo)) // true
console.log(isProxy(bar)) // true
</script>2. isReactive
檢查對(duì)象是否是由reactive創(chuàng)建的響應(yīng)式代理
如果該代理是readonly創(chuàng)建的，但包裹了由reactive船艦的另一個(gè)代理，它也會(huì)返回為true
<script setup>
import { reactive, readonly, isReactive } from 'vue'
let foo = reactive({ name: 'WFT2' })
let bar = readonly(reactive({ name: 'WFT1' }))
let info = readonly({ age: 18 })
console.log(isReactive(foo)) // true
console.log(isReactive(bar)) // true
console.log(isReactive(info)) // false
</script>3. isReadonly
檢查對(duì)象是否是由readonly創(chuàng)建的只讀代理
<script setup>
import { readonly, isReadonly } from 'vue'
let foo = readonly({ name: 'WFT1' })
console.log(isReadonly(foo)) // true
</script>4. toRaw
返回 reactive 或 readonly代理的原始對(duì)象（不建議保留對(duì)原始對(duì)象的持久引用，請(qǐng)謹(jǐn)慎使用）
<script setup>
import { reactive, readonly, toRaw } from 'vue'
let obj1 = { name: 'WFT1' }
let obj2 = { name: 'WFT2' }
let foo = reactive(obj1)
let bar = readonly(obj2)
let myObj1 = toRaw(foo)
let myObj2 = toRaw(bar)
console.log(myObj1 === obj1) // true
console.log(myObj2 === obj2) // true
</script>5. shallowReactive
創(chuàng)建一個(gè)響應(yīng)式代理，它跟蹤其自身property的響應(yīng)性，但不執(zhí)行嵌套對(duì)象的深層響應(yīng)式轉(zhuǎn)換（深層還是原生對(duì)象）
<template>
<div class="main">
<h3>{{ obj.info.name }}</h3>
<button @click="edit">深層修改</button>
</div>
</template>
<script setup>
import { shallowReactive } from 'vue'
let obj = shallowReactive({
info: {
name: 'WFT'
}
})
const edit = () => {
obj.info.name = '哈哈哈'
console.log(obj)
}
</script>上面代碼，當(dāng)點(diǎn)擊深層修改按鈕時(shí) 頁(yè)面并沒(méi)有改變，但是控制臺(tái)打印的obj其中的info.name已經(jīng)修改。如果換成reactive包裹就會(huì)發(fā)生改變
6. shallowReadonly
創(chuàng)建一個(gè)proxy，使其自身的property為只讀，但不執(zhí)行嵌套對(duì)象的深度只讀轉(zhuǎn)換（深層還是可讀、可寫的）
<script setup>
import { readonly } from 'vue'
let obj = readonly({
info: {
name: 'WFT'
}
})
const edit = () => {
obj.info.name = '哈哈哈'
}
</script>看這段兒代碼，我們?nèi)バ薷钠渲袑傩栽诳刂婆_(tái)會(huì)給出警告，為一個(gè)只讀屬性，不可修改
但是將readonly換成 shallowReadonly 就可以修改了，當(dāng)然淺層是不能修改的，深層還是可以修改
<script setup>
import { shallowReadonly } from 'vue'
let obj = shallowReadonly({
info: {
name: 'WFT'
}
})
const edit = () => {
obj.info.name = '哈哈哈'
}
</script>二、Ref相關(guān)的API
1.isRef
檢查對(duì)象是否是由ref創(chuàng)建的響應(yīng)式代理
<script setup>
import { ref, isRef } from 'vue'
const name = ref('WFT')
console.log(isRef(name)) // true
</script>2. toRefs
這個(gè)就是，當(dāng)我們使用了reactive定義了響應(yīng)式對(duì)象的時(shí)候，我們想通過(guò)es6語(yǔ)法解構(gòu)出來(lái)使用的華，這時(shí)候的解構(gòu)出來(lái)的就不是響應(yīng)式數(shù)據(jù)。如果想解構(gòu)出來(lái)的也是響應(yīng)式數(shù)據(jù)，就要使用toRefs了，使用toRefs包裹之后，再解構(gòu)出來(lái)，里面的每個(gè)屬性都相當(dāng)于通過(guò)ref包裹了一層的
<template>
<div class="main">
<h3>{{ info.age }}</h3>
<h3>{{ age }}</h3>
<button @click="edit">修改age</button>
</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
let info = reactive({ age: 18 })
let { age } = toRefs(info)
const edit = () => {
age.value++
}
</script>就像上面的代碼示例
3. toRef
這個(gè)和toRefs有著一樣的功能，只不過(guò)這個(gè)是將里面的某一個(gè)屬性轉(zhuǎn)為響應(yīng)式，該方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)就是目標(biāo)reactive對(duì)象，第二個(gè)就是我們要操作的屬性
<template>
<div class="main">
<h3>{{ info.age }}</h3>
<h3>{{ age }}</h3>
<button @click="edit">修改age</button>
</div>
</template>
<script setup>
import { reactive, toRef } from 'vue'
let info = reactive({ name: 'wft', age: 18 })
let age = toRef(info, 'age')
const edit = () => {
age.value++
}
</script><script setup>
import { reactive, toRef } from 'vue'
const state = reactive({ name: 'wft', age: 18 })
// 如果我們只希望轉(zhuǎn)換一個(gè)reactive對(duì)象中的屬性為ref響應(yīng)式變量，那么可以使用toRef方法
const name = toRef(state, 'name')
const { age } = state // 這個(gè)age不是響應(yīng)式數(shù)據(jù)
const changeName = () => state.name = 'WFT'
</script>4. unref
如果我們想要獲取一個(gè)ref引用中的value，那么也可以通過(guò)unref
如果參數(shù)是一個(gè)ref，則返回內(nèi)部值，否則返回參數(shù)本身；
這是 val = isRef(val) ? val.value : val 的語(yǔ)法糖函數(shù)
<script setup>
import { ref, unref } from 'vue'
const name = ref('WFT')
test(name)
test('這個(gè)名字不是由ref方法包裹的')
function test(name) {
console.log(unref(name))
}
</script>5. shallowRef
創(chuàng)建一個(gè)淺層的ref對(duì)象 和 shallowReactive類似
<template>
<div class="main">
<h3>{{ obj.info.age }}</h3>
<button @click="editAge">修改age</button>
</div>
</template>
<script setup>
import { shallowRef } from 'vue'
const obj = shallowRef({ info: { name: 'wft', age: 18 } })
const editAge = () => {
obj.value.info.age++
console.log(obj.value.info.age) // 19 但是頁(yè)面沒(méi)有更新
}
</script>6. triggerRef
手動(dòng)觸發(fā)和shallowRef相關(guān)聯(lián)的副作用
還是上面的代碼，我們使用shallowRef包裹的淺層ref對(duì)象，修改深層變量的時(shí)候頁(yè)面不會(huì)進(jìn)行更新，這時(shí)候我們手動(dòng)調(diào)用triggerRef就可以強(qiáng)制更新
<template>
<div class="main">
<h3>{{ obj.info.age }}</h3>
<button @click="editAge">修改age</button>
</div>
</template>
<script setup>
import { shallowRef, triggerRef } from 'vue'
const obj = shallowRef({ info: { name: 'wft', age: 18 } })
const editAge = () => {
obj.value.info.age++
triggerRef(obj)
}
</script>7. customRef (使用極少)
創(chuàng)建一個(gè)自定義的ref，并對(duì)其依賴項(xiàng)跟蹤和更新觸發(fā)進(jìn)行顯示控制
它需要一個(gè)工廠函數(shù) ，該函數(shù)接受 track 和 trigger函數(shù)作為參數(shù)；
并且應(yīng)該返回一個(gè)帶有g(shù)et 和 set的對(duì)象
其實(shí)上面真正使用到的時(shí)候就不多，這個(gè)的使用就更少了，所以我也沒(méi)有很深入去研究這個(gè)api，所以這個(gè)不做案例代碼了，知道有這個(gè)東西就好了，大家感興趣可以自己去百度找一些案例看看，一般做第三方庫(kù)的時(shí)候可能會(huì)使用這個(gè)api
以上就是Vue3中Composition的API用法詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3 Composition API的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
web開(kāi)發(fā)中如何優(yōu)雅的解決"重復(fù)請(qǐng)求"問(wèn)題
在我們的日常開(kāi)發(fā)當(dāng)中,很多時(shí)候會(huì)出現(xiàn)短時(shí)間內(nèi)重復(fù)請(qǐng)求的情況,如果沒(méi)有妥當(dāng)?shù)靥幚砗蠊車?yán)重,這篇文章主要給大家介紹了關(guān)于web開(kāi)發(fā)中如何優(yōu)雅的解決重復(fù)請(qǐng)求問(wèn)題的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue將數(shù)字轉(zhuǎn)為中文大寫金額方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue中的動(dòng)態(tài)路由匹配路由問(wèn)題
這篇文章主要介紹了Vue中的動(dòng)態(tài)路由匹配路由問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue?ElementUI級(jí)聯(lián)選擇器回顯問(wèn)題解決
這篇文章主要介紹了vue?ElementUI級(jí)聯(lián)選擇器回顯問(wèn)題解決，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了vue中標(biāo)簽自定義屬性的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
詳解在Vue中如何實(shí)現(xiàn)表單圖片裁剪與預(yù)覽
在前端開(kāi)發(fā)中，表單提交是一個(gè)常見(jiàn)的操作，有時(shí)候，我們需要上傳圖片，但是上傳的圖片可能會(huì)非常大，這會(huì)增加服務(wù)器的負(fù)擔(dān)，同時(shí)也會(huì)降低用戶的體驗(yàn)，因此，我們通常需要對(duì)上傳的圖片進(jìn)行裁剪和預(yù)覽，本文主要給大家介紹如何在Vue中進(jìn)行表單圖片裁剪與預(yù)覽2023-06-06
Vue使用jsmind實(shí)現(xiàn)生成腦圖的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何使用jsmind實(shí)現(xiàn)生成腦圖,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單驗(yàn)證功能，基于NUXT的validate方法實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)圖片驗(yàn)證碼生成，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
在Vue應(yīng)用中,表單驗(yàn)證是非常重要的一部分,Vue提供了一些內(nèi)置的驗(yàn)證規(guī)則,比如required、min、max等,但是有時(shí)候我們需要對(duì)表單進(jìn)行自定義驗(yàn)證,以滿足特定的業(yè)務(wù)需求,本文將介紹如何在Vue中進(jìn)行表單自定義驗(yàn)證,感興趣的朋友可以參考下2023-12-12