VUE3之Composition API（二）

Reactive API的补充

isProxy：检查对象是否是由reactive或readonly创建的proxy.

isReactive：检查对象是否是由reactive创建的响应式代理；如果该代理是readonly建的，但包裹了由reactive 创建的另一个代理，它也会返回true ;

isReadonly：检查对象是否是由readonly 创建的只读代理。

toRaw：返回reactive或readonly 代理的原始对象（不建议保留对原始对象的持久引用。请谨慎使用)。

shallowReactive：创建一个响应式代理，它跟踪其自身property 的响应性，但不执行嵌套对象的深层响应式转换(深层还是原生对象)。

shallowReadonly：创建一个proxy，使其自身的 property为只读，但不执行嵌套对象的深度只读转换（深层还是可读、可写的)。

toRefs和toRef

toRefs：将reactive对象中所有属性都转为ref，建立连接

toRef：对其中一个属性进行转换为ref，建立连接

<script>
import { reactive, toRefs, toRef } from "vue";
    export default {
        setup() {
            const info=reactive({name:"sk",age:18});
            // toRefs：将reactive对象中所有属性都转为ref，建立连接
            // let { name, age }=toRefs(info);
            // toRef：对其中一个属性进行转换为ref，建立连接
            let {name}=toRefs(info);
            let age=toRef(info,"age");
            const change=()=>{
                // age.value++;
                info.age++;
            }

            return {
                name,
                age,
                change
            }
        }
    }
</script>

ref API的补充

unref：如果我们想要获取一个ref引用中的value，那么也可以通过unref方法︰如果参数是一个ref，则返回内部值，否则返回参数本身;这是val = isRef(val) ? val.value : val的语法糖函数;

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

shallowRef：创建一个浅层的ref对象

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

<script>
import { ref, shallowRef, triggerRef } from "vue";
    export default {
        setup() {
            // 浅层响应式
            const info=shallowRef({name:"sk"});
            const changeInfo=()=>{
                info.value.name="james";
                triggerRef(info);
            }
            return {
                info,
                changeInfo
            }
        }
    }
</script>

customRef

customRef可以是我们能够决定如何跟踪依赖与什么时候触发更新。其工厂函数需要传入track和trigger参数，并返回一个拥有get和set方法的对象：

import { customRef } from "vue";
// 自定义ref
export default function(value){
    let timer=null;
    return customRef((track,trigger)=>{
        return {
            get(){
                track();
                return value;
            },
            set(newValue){
                clearTimeout(timer);
                timer=setTimeout(()=>{
                    value=newValue;
                    trigger();
                },1000);
            }
        }
    })
}