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

1. The reactive

reactive method creates and returns a deeply responsive object (Proxy proxy object) based on the incoming object.

reactive will wrap the incoming object and create a
Proxy proxy object for the object. It is a reactive copy of the source 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

ref function is used to package an item of data into a responsive ref object. It receives parameters of any data type as the value of the value property inside this ref object.

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

• can access or change this value using ref 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

    get and set of Object.defineProperty().

  • reactive implements responsiveness (data hijacking) by using

    Proxy, and operates source object internally through Reflect Data

• 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:

const attribute name = toRef(object,'property name')

5. toRefs

toRefs is a practical method for destroying responsive objects and converting

all their properties

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:

const attribute name = toRefs(object,'property name')

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

Why do you still have a reactive function? Do you need the ref function?

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.

Remember: ref is also reactive in nature, ref(obj) is equivalent to reactive({value: obj})

vue.js video tutorial

]

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!