vue3 响应性API

toRef

可以用来为源响应式对象上的 property 性创建一个 ref。然后可以将 ref 传递出去，从而保持对其源 property 的响应式连接。本质类似指针引用。
举例：

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

export default {
   
  setup(props) {
   
    useSomeFeature(toRef(props, 'foo'))
  }
}

---

toRefs

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的ref。

例子如下：

const state = reactive({
   
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)

其中的stateAsRefs变成这样
stateAsRefs:
{
foo: Ref<number>,
bar: Ref<number>
}
因为还是ref型式，依旧保持state与stateAsRefs 的响应式连接。
小技巧：

const obj = reactive({
    foo: 1 })
const obj2 = {
    foo: toRef(obj, 'foo') }
const obj2 = {
    ...toRefs(obj) } // 等同上面这句代码
//const obj2 = reactive({ ...toRefs(obj) })  // 让 obj2 也是 reactive,就可以不用.value

effect(() => {
   
  console.log(obj2.foo.value)  // 由于 obj2.foo 现在是一个 ref，因此要访问 .value
})

obj.foo = 2 // 有效

---

unref

如果参数为 ref，则返回内部值，否则返回参数本身。这就是 val = isRef(val) ? val.value : val简写。
用法：

function useFoo(x: number | Ref<number>) {
   
  const unwrapped = unref(x) // unwrapped 确保现在是数字类型
}

其实我就得ref这个东西还没设计好，为什么还要手动用一下.value取里面的值。就应该像Java的自动装箱与拆箱才对，个人这个unref用处不大。
而且现在最新有一个语法糖 ：

ref: selectAddress = 0
ref: pay = computed(() => {
   
  return route.query.pay;
})

像这样定义后ref就不用再.value取值了

---

isRef

不用多说了，正如其名

---

customRef

创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并应返回一个带有 get 和 set 的对象。
这段话难看懂，但是有例子之后就很好懂了：

<template>
<ul>
  <li v-for="ite