Vue

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);
            }
        }
    })
}

发表评论