Preface
In response to some special needs, in the project, the responsive data needs to be changed to normal primitive data, which is a case in point.
existVueIn this case, the data of ordinary data type can be changed into responsive data, and at the same time, the data of responsive type can be changed into ordinary data
Can be used to improve data performance
toRaw() function
Receive onereactiveResponsive data, converting a responsive data into a normal type of data and converting it into non-responsive data, which is equivalent to restoring an object.reactiveIt's equivalent to production, but forrefResponsive data does not work
Put areactiveThe generated responsive object is converted into a normal (original) object
toRaw()Can be returned byreactive(),readonly(),shallowReactive()orshallowReadonly()The original object corresponding to the created proxy
This is a special method that can be temporarily read without causing proxy access/tracking overhead, or write without triggering changes. In official documents, it is not recommended to save persistent references to the original object
Use scenarios: Used to read a normal object of responsive object. All operations on this ordinary object will not cause page updates.
const foo = {}
const reactiveFoo = reactive(foo)
(toRaw(reactiveFoo) === foo) // true
Notice
For objects, the following dynamic properties are added. If the entire object is not exposed to the outside, the use of newly added variables in the template will not take effect (for example,setupFunction form)
markRaw() function
Receive a raw data and mark an object so that it will never become a responsive object again. That is, even if the data is modified and changed in logic, the page will not be updated and changed.
Mark an object as not to be converted into a proxy, and return the object itself
Application scenarios:
[1]. Some values should not be set to responsive, such as complex third-party library orVueComponent Objects
[2]. Skipping responsive conversions can improve performance when rendering large lists with immutable data sources
const foo = markRaw({})
(isReactive(reactive(foo))) // false
// Also suitable for nesting in other responsive objectsconst bar = reactive({ foo })
(isReactive()) // false
markRaw()andshallowReactive()This shallowAPIAllows you to selectively avoid the default deep response/read-only transition and embed original, non-proxy objects in the state relationship spectrum
If you set a nested, unmarked original object into a responsive object and then access it again, you get the proxy version, which may lead to object identity risks
That is, perform an operation that depends on the object identity, but uses the original version and proxy version of the same object at the same time.
const foo = markRaw({
nested: {}
})
const bar = reactive({
// Although `foo` is marked as the original object, it does not nested:
})
( === ) // false
Summarize
ref()andreactive()is to change a non-responsive type data into responsive data, andtoRaw()andmarkRaw()It is equivalent to restoring responsive data, turning a responsive data into non-responsive data
andtoRawOnly work for data of responsive object type. If it involves converting a responsive data into non-responsive data, it is only used for rendering of pure data and does not cause page updates, it can be used.toRawormarkRaw()
The above is the detailed explanation of the use of vueJs function toRaw markRaw. For more information about vueJs function toRaw markRaw, please follow my other related articles!