Have you used all the APIs of Vue3's commonly used responsive objects?

Ⅰ. ref, reactive (recursive listening)

import {ref，reactive} from 'vue';
setup() {
    const num =  ref(123);
     = 456;
     
    const obj = reactive({num:123});
     = 456;
}

• The ref object will automatically add value in the html template (the ref object is __v_isRef:true for judgment)
• ref object => reactive( { value:0 } ) The underlying layer automatically converts to reactive
• The final basic data type uses => () , and the reference data type uses => ( proxy proxy )

Ⅱ. isRef, isReactive (Judgement)

import {isRef，isReactive} from 'vue';
setup() {
	const num = ref(123)
    (isRef(num))  // => true
}

• Used to determine whether it is a response object created by Ref and Reactive
• Fewer usage scenarios

Ⅲ. toRef and toRefs (Deconstruction)

toRef (One property)

import { toRef , reactive } from 'vue';
setup() {
	const obj = reactive({ width:10, height:20 })
    const width = toRef(obj,'width')
	
	return {
		width
	}
}

• Take out the properties of a response object separately as a response object.

toRefs (all )

import { toRefs , reactive } from 'vue';
setup() {
	const obj = reactive({ width:10, height:20 })
    const { width, height }= toRefs(obj)
	
	return {
		width, height
	}
}

• Take out multiple or all attributes and also respond to objects.
• Generally, all exports are all at once when returning 👇

import { toRefs , reactive } from 'vue';
setup() {
	const obj = reactive({ width:10, height:20 })
	
	return {
		...toRefs(obj)
	}
}

Ⅳ. toRaw, markRaw (released agent)

toRaw (not affecting itself)

import {toRaw} from 'vue';
setup(){
    const num1 =  ref(123)
    const num2 = toRaw(num1)
    (num2 === 123)  //=>true
}

• It does not affect the original data, it is equivalent to copying the current value
• The copied value is not a responsive object

markRaw (add non-responsive object property)

import { markRaw, reactive } from "vue";
setup(){
	const obj = reactive({ num:1 }); //Make the data untrackable	       = markRaw({num:1});

	function add() {
  		++;      // Page data will be updated  	
  		++; //The page data will not be updated	}
	return { obj , add }
}

• The value added by markRaw => property changes, and the page will not listen to
• Used to add finished parameters, which will not happen (and thus save resources)

Ⅴ. unref (copy)

const aaa = ref('abc');
const bbb = unref(aaa); 

• Equivalent to bbb = isRef(aaa) ? : aaa  syntactic sugar
• Can be used for copying

Ⅵ. shallowRef, shallowReactive (non-recursive listening)

shallowRef, shallowReactive (non-recursive listening)

import {shallowRef，shallowReactive} from 'vue';
setup(){
	const  obj1 = shallowRef({a:1,b:{c:2})
	const  obj2 = shallowReactive({a:1,b:{c:2})

	 = 2  //The page has not been updated
	 = 3  //The page has not been updated}

• obj1 (shallowRef) => only listens to the first layer (value value, not the values ​​of a, b, c, and d)
• obj2 (shallowReactive) => only listens to the first layer (the values ​​of a and b, not the values ​​of c)

Ⅶ. triggerRef (forced update)

import {triggerRef, shallowRef} from 'vue';
setup(){
	const  obj1 = shallowRef({a:1,b:{c:2})
     = 2 //The page has not been updated because only the first layer of value is listened to
	triggerRef(obj1);   // Force update

• Non-recursive listening, only listening to the first layer, consumes small resources;
• Force update with triggerRef => performance should be greater than > use directly (ref and reactive)

Summarize

This is the end of this article about the APIs of Vue3's commonly used responsive objects. For more related contents of Vue3's responsive objects, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!