Summary Vue creates responsive data objects (reactive, ref, toRef, toRefs)

1. The reactive

reactivemethod creates and returns adeeply responsive object(Proxy proxy object) based on the incoming object.

reactivewill wrap the incomingobjectand create a
Proxy proxy objectfor the object. It is a reactive copy of thesource object and is not equal to the original object. It == "deeply" == converts all nested properties
of the source object, unpacking and maintaining any ref references within them.

Responsive object attribute value changes will trigger responsiveness no matter how deep the level is. Adding and deleting attributes will also trigger reactivity.

2. ref

reffunction is used to package an item of data intoa responsive ref object. It receives parameters of any data type as the value of thevalue propertyinside this ref object.

• Generate value type data (String,Number,Boolean,Symbol) Reactive objects

• can access or change this value usingref object.value.

• Generate responsive objects of object and array types(Objects and arrays generally do not use ref mode, but reactive mode, which is more convenient)

3. Reactive comparison ref

• Comparison from the perspective of definition data:

  • ref is used to define:Any data type

  • reactive is used to define:Object (or array) type data

How to choose ref and reactive? Suggestion:

• Basic type values (String, Number, Boolean, Symbol) or single-value objects (objects with only one attribute value like {count: 1}) use ref

• Use reactive for reference type values (Object, Array)

• ##Comparison from a principle perspective:
  • ref implements responsiveness (data hijacking) through

    getandsetofObject.defineProperty().

  • reactive implements responsiveness (data hijacking) by using

    Proxy, and operatessource objectinternally throughReflectData

• Comparison from a usage perspective:
  ref-defined data: accessing or changing data requires
  • .value# Data defined by##reactive: neither operating data nor reading data requires
  .value
  • .
4. toRef

#Create a ref for the prop (property) of a responsive object (reactive encapsulation) and keep it Responsive
The two maintain a reference relationship
Syntax:

5. toRefs

toRefs is a practical method for destroying responsive objects and converting

to ref

Convert responsive objects (reactive encapsulation) into ordinary objects
Each property (Prop) of the object is the corresponding ref
The two maintain a reference relationship
Syntax:

Note: The reactive object encapsulated by reactive should not be returned directly through destructuring. This is not responsive.It can be processed through toRefs, and then deconstructed and returned, so that it can be responsive

const state = reactive({ age: 20, name: 'zhangsan'}); return {...state}; // 错误的方式，会丢失响应式 return toRefs(state); // 正确的方式 //最佳方式 return ...toRefs(state)//将对象的各个属性的ref解构到对象根下面。

6. Some questions

When we just want a certain variable to be responsive, it will be more troublesome to use reactive. Therefore, vue3 provides the ref method to monitor simple values, but it does not mean that ref can only be passed Enter simple values, and its bottom layer is reactive, so it has everything reactive has.

]

The above is the detailed content of Summary Vue creates responsive data objects (reactive, ref, toRef, toRefs). For more information, please follow other related articles on the PHP Chinese website!