toRefs使用

<template>
<p>{{count}}</p>
</template>

<script>
import {reactive, toRefs} from "vue";

export default {
  name: "Count",
  setup(){
    const state = reactive({
      count: 1
    })
    const {count} = toRefs(state);
    // 使用 toRefs来解构属性
    /*export declare type ToRefs<T = any> = {
        [K in keyof T]: T[K] extends Ref ? T[K] : Ref<UnwrapRef<T[K]>>;
    };*/
    return {count}
  }
}
</script>

// 当从组合式函数返回响应式对象时，`toRefs` 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行解构/展开：
function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  });

  // 操作 state 的逻辑

  // 返回时转换为ref
  return toRefs(state);
}
export default {
  name: 'Count',
  setup() {
    // 可以在不失去响应性的情况下解构
    const { foo, bar } = useFeatureX();

    return {
      foo,
      bar
    };
  }
};

toRefs 只会为源对象中包含的 property 生成 ref。如果要为特定的 property 创建 ref，则应当使用 toRef