Advanced responsive system API

1, customRef

Use a custom ref to explicitly control the dependency trace and trigger response, take a factory function with track for the trace and trigger for the response, and return an object with get and set attributes.

< the template > < div > < p > refNum: {{refNum}}</p> </div> </template> <script> import {customRef} from 'vue' export default { setup(){ const cusRefs = (value)=>{ return customRef((track,trigger)=>{ return { get(){ track() return value }, set(newValue){ value = newValue; trigger(); } } }) } const refNum = cusRefs(4) setTimeout(()=>{ refNum.value = 10; },3000) return{ refNum } }, } </script>Copy the code

2, markRaw

This function explicitly marks an object as “never converted to a responsive proxy” and returns the object itself.

import {markRaw,reactive,isReactive} from 'vue'
export default {
    setup(){
       let obj = markRaw({
           name:'tom'.infos: {age:10}})console.log(isReactive(reactive(obj)))  //false
        // Although 'obj' is marked as markRaw, markraw.infos is not
        console.log(isReactive(reactive(obj.infos)))  //true
        // If it is marked by markRaw, it is not reactive even if it is used as an attribute in a reactive object
        const objTemp = reactive({ obj })
        console.log(isReactive(objTemp.foo)) // false
        console.log(isReactive(objTemp)) // true
        return{}}},Copy the code

3, shallowReactive

Create shallow, responsive proxies for private (layer 1) properties of an object, not deep, recursive, responsive proxies for “properties of properties,” but just leave them as they are.

<template> <div> <p>name: {{obj.name}}</p> <p>age: {{obj.infos.age}}</p> </div> </template> <script> import {shallowReactive,isReactive} from 'vue' export default { setup(){ let obj = shallowReactive({ name:'tom', infos:{ age:10 } }); // Properties in obj are reactive and can be passed console.log(isReactive(obj)); Log (isReactive(obj.infos)); //true // Obj.infos is not a reactive console.log(isReactive(obj.infos)); //false setTimeout(()=>{ obj.name = "Json"; obj.infos.age++; // The value is 11. console.log(obj) },2000); return { obj } }, } </script>Copy the code

4, shallowReadonly

Create shallow read-only responsive proxies for an object’s own (level 1) properties, as well as deep, recursive proxies that are not read-only.

<template> <div> <p>name: {{obj.name}}</p> <p>age: {{obj.infos.age}}</p> </div> </template> <script> import {shallowReadonly,isReadonly} from 'vue' export default { setup(){ let obj = shallowReadonly({ name:'tom', infos:{ age:10 } }); // Properties in obj are read-only and can be passed console.log(isReadonly(obj)); //true // Obj.infos is not a read-only console.log(isReadonly(obj.infos)); //false setTimeout(()=>{ obj.name = "Json"; //Set operation on key "name" failed: target is readonly. obj.infos.age++; // The value is changed to 11, but the page displays the original data? console.log(obj) },2000); return { obj } }, } </script>Copy the code

5, shallowRef

A ref object is created and its.value changes are tracked, but reactive proxy transformations are not performed on the changed.value.

import{ref,shallowRef,isReactive} from 'vue'
export default {
    setup(){
       let obj = shallowRef({});
       let infos = ref({});
        obj.value = {};
        infos.value = {}
        console.log(isReactive(obj)) ; //false
        console.log(isReactive(infos)) ; //false}},Copy the code

6, toRaw

Returns ordinary objects that are transformed into reactive proxies by reactive or Readonly methods. This is a restore method that can be used for temporary reads without access being proxied/tracked and without triggering changes on writes. Holding a reference to the original object is not recommended. Use with caution.

import{reactive,readonly,toRaw} from 'vue'
export default {
    setup(){
       let obj = {};
       let resactives = reactive(obj);
       let readonlys = readonly(obj);
       // Restore reactive/readonly objects
       console.log( toRaw(resactives) === obj)  //true
       console.log( toRaw(readonlys) === obj)  //true}}Copy the code

Welcome to pay attention to the public account (web learning bar), learning progress together: