Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use markRaw in Vue3.0 API". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use markRaw in Vue3.0 API" can help you solve the problem.

MarkRaw

Mark an object so that it is never converted to proxy. Returns the object itself.

Import {markRaw, reactive, isReactive} from "vue"

Const foo = markRaw ({})

Console.log (isReactive (reactive (foo) / / false

/ can also be used when nested in other responsive objects

Const bar = reactive ({foo})

Console.log (isReactive (bar.foo)) / / false

important

MarkRaw and the shallowXXX API below allow you to opt out of the default deep response / read-only conversion mode and embed the original, unproxied objects in the state diagram. They can be used flexibly according to the situation:

Some values should not be responsive, such as complex third-party class instances or Vue component objects.

Skipping the proxy conversion can improve performance when rendering a large list with immutable data sources.

These examples are advanced use, because the original selection exit is only at the root level, so if you add a nested, untagged original object to a responsive object, and then access the responsive object again, you will get the version of the original object after it has been proxied. This may lead to the risk of identity-- that is, performing an operation that depends on the object itself, but using both the original version and the proxied version of the same object:

Import {markRaw, reactive, isReactive} from "vue"

Const foo = markRaw ({

Nested: {}

})

Const bar = reactive ({

/ / although `foo` is marked as original, foo.nested is not.

Nested: foo.nested

})

Console.log (foo.nested = bar.nested) / / false

Identity risks are usually rare. However, in order to use these API correctly and safely avoid identity risks, it is necessary to have a full understanding of how responsive systems work.

This is the end of the introduction to "how to use markRaw in Vue3.0 API". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.