vue3 响应性API总结

341 阅读2分钟

isRef()

判断一个值是否是ref对象

const count = ref(1);
const obj = reactive({
    a:1
});
console.log(isRef(count)); // true
console.log(isRef(obj)); // false

toRef()

可以为响应式对象上的某个属性创建ref对象,并且创建出来的ref与源属性保持同步。

const state = reactive({
    foo:1,
    bar:2
})
// 第一个参数为响应式对象,第二个参数为对象的属性名。
const fooRef = toRef(state, "foo");
fooRef.value++;
console.log(state.foo); // 2
state.foo++;
console.log(fooRef.value); // 3

toRefs()

将一个响应式对象转换为普通对象,该普通对象的每个属性都是指向源对象相应属性的ref对象

const state = reactive({
    foo:1,
    bar:2
})
const stateRefs = toRefs(state);
/*
    stateRefs :{
        foo: Ref<number>,
        bar: Ref<number>
    }
*/
// 解构时不会丢失响应式
const {foo, bar} = stateRefs

isProxy()

检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。

const count = ref(1); 
const obj1 = reactive({ 
    a:1 
}); 
const obj2 = readonly({ 
    b:1 
}); 
console.log(isProxy(count)); // false 
console.log(isProxy(obj1)); // true
console.log(isProxy(obj2)); // true

isReactive()

检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理

isReadonly()

检查一个对象是否是由 readonly() 或 shallowReadonly() 创建的代理

toRaw()

可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象

const obj = {}
const reactiveObj = reactive(obj)
console.log(toRaw(reactiveObj) === obj) // true

makeRaw()

将一个对象标记为不可被转为代理。返回该对象本身。

const obj = markRaw({})
const reactiveObj = reactive(obj);
console.log(isReactive(reactiveObj)) // false

// 也适用于嵌套在其他响应性对象
const newObj = reactive({ 
    obj 
})
console.log(isReactive(newObj.obj)) // false

shallowRef()

shallowRef()与Ref()不同,仅.value(第一层)是响应式的,深层的属性不是响应式的

const obj = shallowRef({ count: 1 })
// 不会更改
obj.value.count = 2
// 会更改
obj.value = { count: 2 }

shallowReactive()

与shallowRef()类似,仅第一层是响应式的,深层的属性不是响应式的

shallowReadonly()

与shallowReactive()同理,只读

customRef()

创建一个自定义的 ref,显式声明对其依赖追踪和更新触发的控制方式