Vue3.0 API中怎么使用shallowReactive

這篇文章主要介紹了Vue3.0 API中怎么使用shallowReactive的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue3.0 API中怎么使用shallowReactive文章都會有所收獲，下面我們一起來看看吧。

shallowReactive

創(chuàng)建一個響應(yīng)式代理，它跟蹤其自身 property 的響應(yīng)性，但不執(zhí)行嵌套對象的深層響應(yīng)式轉(zhuǎn)換 (暴露原始值)。

<script setup>

import { shallowReactive, isReactive } from "vue";

const state = shallowReactive({

  foo: 1,

  nested: {

    bar: 2

  }

})

// 改變 state 本身的性質(zhì)是響應(yīng)式的

state.foo++

// ...但是不轉(zhuǎn)換嵌套對象

console.log(isReactive(state.nested)) // false

state.nested.bar++ // 非響應(yīng)式

</script>

與 reactive 不同，任何使用 ref 的 property 都不會被代理自動解包。

shallowReadonly

創(chuàng)建一個 proxy，使其自身的 property 為只讀，但不執(zhí)行嵌套對象的深度只讀轉(zhuǎn)換 (暴露原始值)。

<script setup>

import { shallowReadonly, isReadonly } from "vue";

const state = shallowReadonly({

  foo: 1,

  nested: {

    bar: 2

  }

})

// 改變 state 本身的 property 將失敗

state.foo++

console.log(isReadonly(state))

// ...但適用于嵌套對象

console.log(isReadonly(state.nested)) // false

state.nested.bar++ // 適用

</script>

與 readonly 不同，任何使用 ref 的 property 都不會被代理自動解包。

關(guān)于“Vue3.0 API中怎么使用shallowReactive”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue3.0 API中怎么使用shallowReactive”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。