Vue function comparison: use of toRaw() and markRaw()

This article will help you learn the vue function and compare the toRaw and markRaw functions in vueJs. I hope it will be helpful to you!

For some special needs, in the project, it is necessary to change the responsive data into ordinary primitive type data. This situation exists.

In Vue, you can change ordinary data type data into responsive data; at the same time, you can also change responsive type data into ordinary type data

Yes Used to improve the performance of data

toRaw() function

receives a reactive responsive data, converts a responsive data into a common type of data, and converts it into Non-responsive data is equivalent to restoring objects, reactive is equivalent to production, but it does not work for ref responsive data. [Related recommendations: vuejs video tutorial, web front-end development]

Convert a responsive object generated by reactive to a normal (original ) object

toRaw() can be returned by reactive(), readonly(), shallowReactive() or shallowReadonly()The original object corresponding to the created proxy

This is a special method that can be used to temporarily read without incurring proxy access/tracking overhead, or write without triggering changes , in the official documentation, it is not recommended to save a persistent reference to the original object

Usage scenario: A common object used to read responsive objects, all operations on this common object, It will not cause the page to be updated

const foo = {}
const reactiveFoo = reactive(foo)

console.log(toRaw(reactiveFoo) === foo)  // true

Note

For objects, subsequent dynamically added attributes, if the entire object is not exposed to the outside world, use the new attribute in the template The variable is not valid (for setup function form)

markRaw() function

Receives a raw data and marks an object so that it will never become Responsive objects, that is, even if the data is modified in the logic, the page will not be updated.

Mark an object as not being converted into a proxy and return the object itself

Application scenario:

[1]. Some values ​​should not be set to be responsive, such as complex third-party libraries or Vue component objects

[2]. When rendering large lists with immutable data sources, skipping reactive conversions can improve performance

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false

// 也适用于嵌套在其他响应性对象
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

markRaw() and shallowReactive()This shallow styleAPI allows you to selectively avoid the default deep response/read-only conversion and embed original, non-proxy objects in the state relationship spectrum

If you put Set a nested, unmarked original object into a reactive object, and then access it again, you get the proxy version, which may lead to object identity risks

i.e. executing a dependency on the object Identity operation, but uses both the original version and the proxy version of the same object

const foo = markRaw({
  nested: {}
})

const bar = reactive({
  // 尽管 `foo` 被标记为了原始对象，但 foo.nested 却没有
  nested: foo.nested
})

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

Summary

ref()andreactive() It turns a non-responsive type data into responsive data, and toRaw() and markRaw() are equivalent to the restoration of responsive data, turning a responsive data into Non-responsive data

and toRaw only works for responsive object type data. If it involves converting a responsive data into non-responsive data, it is only used for pure data. Rendering, without causing page updates, can use toRaw or markRaw()

can often improve the performance of data

(Learning video sharing : vuejs introductory tutorial, Basic programming video)

The above is the detailed content of Vue function comparison: use of toRaw() and markRaw(). For more information, please follow other related articles on the PHP Chinese website!