Preface
existvue3Some similar combinationsAPI,If not used frequently, it will be confused, and it is very confusing for beginners, such as:shallowRefandshallowReactive
shallowRef
If the basic data type is passed, thenshallowRefandrefThere is basically no difference in the function ofrefThe internal values will be stored and exposed as they are and will not be converted into responsive in depth
But if it is an object, then there is a difference.shallowRefDo not process object type data
In fact, it only processes the responsive form of the basic data type, and does not perform responsive form of the object.
Performance optimization, application scenario: If there is an object data, the subsequent functions will not modify the properties in the object, but replace the generated object, then it can be usedshallowRef
shallowRef()Often used to optimize performance of large data structures or integrate with external state management systems
const state = shallowRef({ count: 1 })
// Changes will not be triggered = 2
// Changes will be triggered = { count: 2 }
shallowReactive
Responsive data processing with shallow function, that is, only the data of the first layer object is processed. The data nested downwards will not work.
Only the data responsiveness of the first layer of the object is considered, and the data nested in the first layer is not considered
andreactive()Different, there is no deep and transformation. In a shallow responsive object, only the root-level attributes are responsive, and the value of the attribute will be stored and exposed as it is, which means that the attribute with a value of ref will not be automatically deconstructed.
Performance optimization:Specific application scenarios:
If there is an object data whose data structure is deep and complex, but only the outer attributes need to be changed when changing, then it can be usedshallowReactive, as shown in the following example code
const state = shallowReactive({
foo: 1,
nested: {
bar: 2
}
})
// Change the properties of the state itself are responsive++
// ...But the lower nested object will not be converted to responsiveisReactive() // false
// Not responsive++
Summarize
shallowReativeandshallowRefIn some special application scenarios, performance can be improved. The former is for objects and is used for responsive data processing with shallow effects, while the latter only processes responsive forms of basic data types and does not perform responsive processes of objects.
The above is the detailed content of the use of shallowRef and shallowReactive in VueJs. For more information about Vue shallowRef shallowReactive, please follow my other related articles!