How to use shallowReactive in Vue3.0 API
This article mainly introduces the relevant knowledge of how to use shallowReactive in Vue3.0 API, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this Vue3.0 API article on how to use shallowReactive. Let's take a look at it.
ShallowReactive
Create a responsive agent that tracks the responsiveness of its own property, but does not perform deep responsive transformations of nested objects (exposing the original values).
Import {shallowReactive, isReactive} from "vue"
Const state = shallowReactive ({
Foo: 1
Nested: {
Bar: 2
}
})
/ / changing the nature of state itself is responsive
State.foo++
/ /... But do not convert nested objects
Console.log (isReactive (state.nested)) / / false
State.nested.bar++ / / non-responsive
Unlike reactive, any property that uses ref is not automatically unpackaged by the agent.
ShallowReadonly
Create a proxy that makes its own property read-only, but does not perform a deep read-only conversion of nested objects (exposing the original value).
Import {shallowReadonly, isReadonly} from "vue"
Const state = shallowReadonly ({
Foo: 1
Nested: {
Bar: 2
}
})
/ / change the property of state itself will fail
State.foo++
Console.log (isReadonly (state))
/ /... Can be applied to nested objects
Console.log (isReadonly (state.nested)) / / false
State.nested.bar++ / / applicable
Unlike readonly, any property that uses ref is not automatically unpackaged by the agent.
This is the end of the article on "how to use shallowReactive in Vue3.0 API". Thank you for reading! I believe you all have a certain understanding of "how to use shallowReactive in Vue3.0 API". If you want to learn more, you are welcome to follow the industry information channel.
