Understand the difference between REF and Reactive

The ref and Reactive functions are used to define reactive data.

But Reactive is better for complex data types (JSON/ARR) and REF is better for basic data types (accept basic data types and objects)

reactive:

(1) Its responsiveness is more ‘deep’, and the underlying essence is to wrap the incoming data into a Proxy.

(2) The argument must be an object or an array. It is difficult to make an element of the object reactive. ToRefs is required

ref:

(1) Function parameters can be basic data types or accept object types

(2) If the parameter is an object type, and the underlying value is reactive, the system will automatically convert the value passed to ref to:

Reactive ({value:1}) ref(1)->reactive({value:1}) ref(2)->reactive({value:1}) Deeply dependent on ReactiveCopy the code

(3) If you access the template file, the system automatically adds. Value. Value is required manually in js

(4) The ref response principle depends on get() and set() of Object.defineProperty().

Ref, toRef, toRefs

  • Ref: copy and modify the responsive data without affecting the previous data. The interface updates automatically when data changes

  • ToRef: reference, modifying responsive data affects previous data; The interface does not update automatically when data changes

  • ToRefs:

    (1) It takes an object as a parameter, iterates through all the attributes on the object, and then calls a single toRef

    (2) Multiple attributes of the object are changed into responsive data, and the responsive data is required to be associated with the original data, and the interface will not be updated when the responsive data is updated, which is used to set multiple data as responsive in batches

Application (1)

//reactive (props, CTX) {const state = reactive({flag: false, count: 0, tableData: [] }) const total = ref(10) const add = () =>{ state.count++ } return { ... ToRefs (state), total}} Note: If you want to modify the state above, such as the following is an error: const changeData = ()=>{state = {flag: true, count: 2, tableData: []}}Copy the code

So what if we want to assign values to reactive objects that can be listened to without losing responsiveness? How else can you do it than one by one?

Const objList = reactive({userInfo:{name:"liki", age:18, sex:' male '}}) } (1) const objList = ref({name:"liki", age:18, sex:' male '}) }Copy the code

So ref defines simple data types; Reactive defines complex data types. What would be printed if we defined a complex data type with ref?

Print out the value to find the proxy, what is the problem? Important things say three times, 👆 already said once, say again two times…

Reactive ({value:})** If a value is passed to a ref, the system will automatically convert it to reactive({value:})**

Reactive ({value:})** If a value is passed to a ref, the system will automatically convert it to reactive({value:})**

So, let’s look at the complex type defined by reactive. How do I print it?

const obj = reactive({a:1})
console.log(obj.a) //1
Copy the code

So why does obj print without value? If you look at the printed result, you will find that it is a Proxy object, and the Proxy represents the Child object. Therefore, we are accessing the properties of the Proxy object, so we do not need the.value

Ok, so that’s it, any more questions! Please find me in the comments section again! Have what wrong hope everybody great god many give directions!!

Ollie here!!