在vue3的composition api中的reactive和ref存在一些其他api。下面我们进行总结。
一、Reactive判断api
isProxy：判断对象是否由reactive或者readonly创建的对象。

//判断reactive
    const info = reactive({ name: "dmc", age: 20 });
    console.log(isProxy(info))  //true

//判断readonly
	const info = readonly({ name: "dmc", age: 20 });
    console.log(isProxy(info))  //true

isReactive：检查对象是否是reactive创建的响应式代理

const info = reactive({ name: "dmc", age: 20 });
    console.log(isReactive(info))   //true

//即使在readonly外层包裹reactive也是可以的。
    const info = reactive({ name: "dmc", age: 20 });
    console.log(isReactive(info))   //true
//其代理为readonly创建的，但是其内部为reactive创建的，打印结果为true,反之为false.
    const info = reactive({name:"zs"})
    const set = readonly(info)
    console.log(isReactive(set))   //true

isReadonly:检查对象是否由readonly创建的代理

const info = readonly({name:"zs"})
    console.log(isReadonly(info))   //true

toRaw：返回reactive和readonly代理的原始对象

const info = readonly({name:"zs"})
    console.log(toRaw(info))    // {name:"zs"}

shallowReactive：只进行对象浅层次的响应式，深层次的还是原生对象。

let info = shallowReactive({ info: { counter: 1 }, age: 20 });
	 当我们改变age的值时，页面会进行重新渲染，当我们改变counter的值时，不会进行页面的重新渲染。

shallowReadonly：只进行对象浅层次的只读设置，深层次仍然是原生对象，可以读写。

const info = shallowReadonly(
    {
      baseInfo: { name: "dmc", age: 20 },
      scores: 100,
    });
如上面代码所示，此时改变scores的值会报出warning,当改变baseInfo中的age值时，页面不会
发生更新，因为此时baseInfo中的对象是普通对象，而不是响应式对象。

二、ref相关api
toRefs

let info = reactive({ name: "XSY", age: 20 });
    return {
		...info
	}

此时我们使用reactive来设置响应式对象时，此时返回的解构对象不是响应式的，我们可以使用toRefs来解决。

let info = reactive({name:"xsy", age:20})
	return {
    	...toRefs(info)
    }	
    此时就相当于对info解构后的内容进行设置ref响应式

toRef

import { reactive, toRef } from "vue";
export default {
  setup() {
    const info = reactive({ name: "dmc", age: 200 });
    let age = toRef(info, "age") 
    //toRef第一个参数是reactive对象，第二个参数是属性
    //表示从该响应式对象中取出age属性并将其转化为ref对象
    let {name} = info
    const changeAge = () => {
      age.value++   //age为ref对象
    };
    const changeName = () => {
      name= "dddd";   //这里不加value,因为其不是ref对象
    }; 

    return {
      age,
      name,
      changeName,
      changeAge,
    };
  },
};

ref的其他api
unref：将取出ref中的value值，如果是普通值，则直接返回。

const age = ref(20)
      console.log(age.value)   //20  
      console.log(unref(age))  //20
      //其内部可以表示为:
      //val = isRef(val)? val.value: val

isRef：判断一个对象是否是一个ref对象

const age = ref(20)
      console.log(isRef(age))   //true

shallowRef：创建浅层的ref对象

import { ref } from 'vue'
  export default {
    setup() {
      const info = ref({name:"sx", age:2})
      const changeAge = () => {
        info.value.age++
      }
      return {
        info,
        changeAge
      }
    }
  }
  此时当改变age中的值时，会发生页面的改变。

import { ref, shallowRef } from 'vue'
  export default {
    setup() {
      const info = shallowRef({name:"sx", age:2})
      const changeAge = () => {
        info.value.age++
        console.log(info.value)
      }
      return {
        info,
        changeAge
      }
    }
  }
此时当改变age的值时，不会发生页面的改变。

triggerRef:手动触发和shallowRef相关联的副作用。

import { ref, shallowRef, triggerRef } from 'vue'
  export default {
    setup() {
      const info = shallowRef({name:"sx", age:2})
      const changeAge = () => {
        info.value.age++
        console.log(info.value)
        triggerRef(info)   //加上triggerRef就能改变页面中的内容
      }
      return {
        info,
        changeAge
      }
    }
  }