亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3中Composition的API用法詳解

 更新時間：2023年06月16日 08:45:48   作者：會說法語的豬  
這篇文章主要為大家詳細介紹了Vue3中Composition的一些常見API的用法，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下

一、 Reactive判斷的API 

1. isProxy

檢查對象是否由reactive或者readonly創(chuàng)建的proxy ，返回一個布爾值

<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

檢查對象是否是由reactive創(chuàng)建的響應式代理 

如果該代理是readonly創(chuàng)建的，但包裹了由reactive船艦的另一個代理，它也會返回為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

檢查對象是否是由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代理的原始對象（不建議保留對原始對象的持久引用，請謹慎使用） 

<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)建一個響應式代理，它跟蹤其自身property的響應性，但不執(zhí)行嵌套對象的深層響應式轉換（深層還是原生對象） 

<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>

上面代碼，當點擊深層修改按鈕時 頁面并沒有改變，但是控制臺打印的obj其中的info.name已經(jīng)修改。如果換成reactive包裹就會發(fā)生改變 

6. shallowReadonly

創(chuàng)建一個proxy，使其自身的property為只讀，但不執(zhí)行嵌套對象的深度只讀轉換（深層還是可讀、可寫的） 

<script setup>
import { readonly } from 'vue'
let obj = readonly({
  info: {
    name: 'WFT'
  }
})
const edit = () => {
  obj.info.name = '哈哈哈'
}
</script>

看這段兒代碼，我們?nèi)バ薷钠渲袑傩栽诳刂婆_會給出警告，為一個只讀屬性，不可修改

但是將readonly換成 shallowReadonly 就可以修改了，當然淺層是不能修改的，深層還是可以修改

<script setup>
import { shallowReadonly } from 'vue'
let obj = shallowReadonly({
  info: {
    name: 'WFT'
  }
})
const edit = () => {
  obj.info.name = '哈哈哈'
}
</script>

二、Ref相關的API 

1.isRef 

檢查對象是否是由ref創(chuàng)建的響應式代理 

<script setup>
import { ref, isRef } from 'vue'
const name = ref('WFT')
console.log(isRef(name)) // true
</script>

2. toRefs 

這個就是，當我們使用了reactive定義了響應式對象的時候，我們想通過es6語法解構出來使用的華，這時候的解構出來的就不是響應式數(shù)據(jù)。如果想解構出來的也是響應式數(shù)據(jù)，就要使用toRefs了，使用toRefs包裹之后，再解構出來，里面的每個屬性都相當于通過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

這個和toRefs有著一樣的功能，只不過這個是將里面的某一個屬性轉為響應式，該方法接受兩個參數(shù)，第一個參數(shù)就是目標reactive對象，第二個就是我們要操作的屬性 

<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 })
// 如果我們只希望轉換一個reactive對象中的屬性為ref響應式變量，那么可以使用toRef方法
const name = toRef(state, 'name')
const { age } = state // 這個age不是響應式數(shù)據(jù)
const changeName = () => state.name = 'WFT'
</script>

4. unref

如果我們想要獲取一個ref引用中的value，那么也可以通過unref

如果參數(shù)是一個ref，則返回內(nèi)部值，否則返回參數(shù)本身；

這是 val = isRef(val) ? val.value : val 的語法糖函數(shù)

<script setup>
import { ref, unref } from 'vue'
const name = ref('WFT')
test(name)
test('這個名字不是由ref方法包裹的')
function test(name) {
  console.log(unref(name))
}
</script>

5. shallowRef

創(chuàng)建一個淺層的ref對象 和 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  但是頁面沒有更新
}
</script>

6. triggerRef

手動觸發(fā)和shallowRef相關聯(lián)的副作用 

還是上面的代碼，我們使用shallowRef包裹的淺層ref對象，修改深層變量的時候頁面不會進行更新，這時候我們手動調用triggerRef就可以強制更新 

<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)建一個自定義的ref，并對其依賴項跟蹤和更新觸發(fā)進行顯示控制

它需要一個工廠函數(shù) ，該函數(shù)接受 track 和 trigger函數(shù)作為參數(shù)；

并且應該返回一個帶有get 和 set的對象 

其實上面真正使用到的時候就不多，這個的使用就更少了，所以我也沒有很深入去研究這個api，所以這個不做案例代碼了，知道有這個東西就好了，大家感興趣可以自己去百度找一些案例看看，一般做第三方庫的時候可能會使用這個api 

以上就是Vue3中Composition的API用法詳解的詳細內(nèi)容，更多關于Vue3 Composition API的資料請關注腳本之家其它相關文章！

相關文章

最新評論