前言
这篇文章主要介绍组合API的响应式工具函数，依然是在setup基础上来搞，本来想加TS，等到后期写实战文章的时候再加吧。
工具类函数
1.isRef()
isRef()检查某个值是否为ref，注意返回值是一个类型判定，这意味着isRef可以被用作类型守卫
示例：
<script setup>
const foo = ref('')
const fo = reactive({})
const f = '测试'
console.log(isRef(foo)) // ture
console.log(isRef(fo)) // false
console.log(isRef(f)) // false
</script>
2.unref()
unref()如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖。
示例：
<script setup>
const foo = ref('aa')
const fo = reactive({key : 'value'})
const f = '测试'
console.log(unref(foo)) // 'aa'
console.log(unref(fo)) // reactive对象
console.log(unref(f)) // 测试
</script>
3.toRef()
toRef()基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。
官网提供的类型：
function toRef<T extends object, K extends keyof T>(
object: T,
key: K,
defaultValue?: T[K]
): ToRef<T[K]>
我们可以看出这个方法至少需要两个参数，第一个是对象，第二个是目标key
示例：
<script setup>
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
</script>
这不同于const fooRef = ref(state.foo)
上面这个 ref 不会和 state.foo 保持同步，因为这个 ref() 接收到的是一个纯数值。
4.toRefs()
将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef()创建的。
示例：
<script>
const state = reactive({ foo: 1, bar: 2 })
const stateAsRefs = toRefs(state)
/* stateAsRefs 的类型：
{
foo: Ref<number>,
bar: Ref<number>
} */
// 这个 ref 和源属性已经“链接上了”
state.foo++
console.log(stateAsRefs.foo.value) // 2
stateAsRefs.foo.value++
console.log(state.foo) // 3
</script>
这是打印的stateAsRefs，可以看出，对象本身是普通对象，但是属性是ref，组件可以解构/展开返回的对象而不会失去响应性，例如：const { foo, bar } = stateAsRefs
5.isProxy()
检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。
6.isReactive()
检查一个对象是否由reactive()或者shallowReactive()创建的代理
7.isReadonly()
检查一个对象是否由readonly()或者shallowReadonly()创建的代理
结语
本次主要尝试了一些工具类的函数，具体情况还需要结合具体去使用，需要坚持，需要相信量变引起质变的过程。下期来写一些响应式进阶。参考网址：cn.vuejs.org/api/reactiv…
