1.isRef():
检查某个值是否为ref,返回的是类型判定,和typeof相似
2.unref()
如果参数是ref,则返回内部值,否则返回参数本身,这是 val = isRef(val) ? val.value : val
计算的一个语法糖。
function useFoo(x: number | Ref<number>) {
const unwrapped = unref(x)
// unwrapped 现在保证为 number 类型
}
3.toRef()
基于响应式对象上的一个属性,创建一个对应的 ref。这样创建的 ref 与其源属性保持同步:改变源属性的值将更新 ref 的值,反之亦然
toRef()
这个函数在你想把一个 prop 的 ref 传递给一个组合式函数时会很有用,两者可以保持同频变动
const state = reactive({
foo: 1,
bar: 2
})
const fooRef = toRef(state, 'foo')
// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2
// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3
和props搭配
<script setup>
import { toRef } from 'vue'
const props = defineProps(/* ... */)
// 将 `props.foo` 转换为 ref,然后传入
// 一个组合式函数
useSomeFeature(toRef(props, 'foo'))
</script>
4.toRefs()
将一个响应式对象转换为一个普通对象,这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。
toRefs
在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref,请改用 toRef
const state = reactive({
foo: 1,
bar: 2
})
const stateAsRefs = toRefs(state)
将state里面的值都变成单个的ref,
/*
stateAsRefs 的类型:{
foo: Ref<number>,
bar: Ref<number>
}
*/
// 这个 ref 和源属性已经“链接上了”
state.foo++
console.log(stateAsRefs.foo.value) // 2
stateAsRefs.foo.value++
console.log(state.foo) // 3
5.toRaw()
根据一个 Vue 创建的代理返回其原始对象。
toRaw作用是获取原始数据,不建议持久使用,一般用于临时读取而不引起代理访问/跟踪开销,或是写入而不触发更改的特殊方法。
const foo = {}
const reactiveFoo = reactive(foo)
console.log(toRaw(reactiveFoo) === foo) // true