《vue3基础知识》学习笔记Day30-（Period2）组合式API响应式API：常用的工具函数简单介绍

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