12 【其它组合式API】

23.其它组合式API

ref、unref、toRef、toRefs、isRef、customRef、shallowRef、triggerRef

refs api中的重点为：ref、toRefs、shallowRef、customRef，其次是 isRef 等。

23.1 toRef 与 toRefs

23.1.1 toRef

• 作用：可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。

• 语法 (源对象 , 源对象属性)````const name = toRef(person,‘name’)```

• 应用: 源响应式对象(toRef的第一个参数) 上的某个 property 新创建一个 ref

• toRef示例

  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
  

  请注意，这不同于：

  const fooRef = ref(state.foo)
  

  上面这个 ref 不会和 state.foo 保持同步，因为这个 ref() 接收到的是一个纯数值。

  toRef() 这个函数在你想把一个 prop 的 ref 传递给一个组合式函数时会很有用：

  <script setup>
  import {
        toRef } from 'vue'
  
  const props = defineProps(/* ... */)
  
  // 将 `props.foo` 转换为 ref，然后传入
  // 一个组合式函数
  useSomeFeature(toRef(props, 'foo'))
  </script>
  

  当 toRef 与组件 props 结合使用时，关于禁止对 props 做出更改的限制依然有效。尝试将新的值传递给 ref 等效于尝试直接更改 props，这是不允许的。在这种场景下，你可能可以考虑使用带有 get 和 set 的 computed 替代。详情请见在组件上使用 v-model 指南。

  即使源属性当前不存在，toRef() 也会返回一个可用的 ref。这让它在处理可选 props 的时候格外实用，相比之下 toRefs 就不会为可选 props 创建对应的 refs。

23.1.2 toRefs

• 作用：

  • 将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。
  • 主要功能：当从组合式函数 (.js) 返回响应式对象时，用toRefs就可以在不丢失响应性的情况下对返回的对象进行解构/展开。
  • toRef 是转单个， toRefs全转。

• 语法：toRefs(person)

• 原理：toRefs 会将 reactive 生成的对象的根级属性全都用 ref 转成 ref 对象，然后解构出来的都是 ref 对象，从而不丢失响应式

• 示例

  <script lang='ts' setup>
  import {
        reactive,toRef } from 'vue';
  const state = reactive({
       
    foo: 1,
    bar: 2
  })
  let a = {
       ...state}
  const stateAsRefs = toRefs(state)
  // stateAsRefs 是一个普通对象，stateAsRefs.foo则是响应式对象，因此{...}解构才不会丢失响应式
  let {
       bar} = stateAsRefs 
  console.log(stateAsRefs)
  console.log