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,显式声明对其依赖追踪和更新触发的控制方式