Vue3组合式函数多参数响应式处理最佳实践咨询

我完全理解你现在的困扰——把props一个个转成ref、在组合式函数里到处写.value，确实显得繁琐又冗余，尤其在业务逻辑复杂的时候，很容易因为重复代码出错。我来分享几个能帮你简化代码、保持响应式的实用方法：

1. 批量将Props转为Ref，告别重复的toRef #

你现在逐个用toRef(() => xxx)来转换props的写法太繁琐了，Vue提供的toRefs可以一次性把整个props对象的所有属性转为独立的Ref，而且完全保持和原props的响应式关联：

<script setup lang="ts">
const props = defineProps({
  cx: Number,
  cy: Number,
  r: Number,
  size: Number,
});

// 一次性将props的所有属性转为Ref
const { cx, cy, r, size } = toRefs(props);

// 直接传递这些Ref给组合式函数
const { circleStyle } = useCircleStyle({ cx, cy, r });
</script>

这样就不用手动创建cxRef、cyRef这些重复变量了，代码瞬间简洁很多。

2. 在组合式函数里用unref简化.value调用 #

你担心在组合式函数里unref会丢失响应式，其实在computed/watch的回调函数里用unref是完全安全的——因为这些回调本身是响应式追踪的，只要依赖的Ref发生变化，回调就会重新执行，不会丢失响应性。

比如可以把组合式函数改成这样：

const useCircleStyle = ({ cx, cy, r }: {
  cx: Ref<number>,
  cy: Ref<number>,
  r: Ref<number>,
}) => {
  const circleStyle = computed(() => {
    // 在computed回调里用unref获取当前值，不用写.value
    const currentCx = unref(cx);
    const currentCy = unref(cy);
    const currentR = unref(r);

    return `
      cx: ${currentCx}px;
      cy: ${currentCy}px;
      r: ${currentR}px;
    `;
  });

  return { circleStyle };
};

如果需要多次使用这些值，还可以在组合式函数里创建单独的computed属性来封装：

const useCircleStyle = ({ cx, cy, r }: {
  cx: Ref<number>,
  cy: Ref<number>,
  r: Ref<number>,
}) => {
  // 用computed封装单个值，后续直接用，不用重复unref
  const currentCx = computed(() => unref(cx));
  const currentCy = computed(() => unref(cy));
  const currentR = computed(() => unref(r));

  const circleStyle = computed(() => `
    cx: ${currentCx.value}px;
    cy: ${currentCy.value}px;
    r: ${currentR.value}px;
  `);

  // 也可以把这些封装好的computed暴露出去供外部使用
  return { circleStyle, currentCx, currentCy, currentR };
};

3. 直接传递整个Props对象给组合式函数（更简洁的批量处理） #

如果组合式函数需要用到大部分props，你甚至可以直接把整个props对象传进去，在组合式函数内部用toRefs处理，进一步减少组件里的代码：

组件代码：

<script setup lang="ts">
const props = defineProps({
  cx: Number,
  cy: Number,
  r: Number,
  size: Number,
});

// 直接传递整个props对象
const { circleStyle } = useCircleStyle(props);
</script>

组合式函数代码：

// 这里接收的是原始的props响应式对象
const useCircleStyle = (props: {
  cx: number,
  cy: number,
  r: number,
}) => {
  // 在内部用toRefs转为Ref，保持响应式
  const { cx, cy, r } = toRefs(props);

  const circleStyle = computed(() => `
    cx: ${cx.value}px;
    cy: ${cy.value}px;
    r: ${r.value}px;
  `);

  return { circleStyle };
};

这种方式特别适合组合式函数需要用到多个props的场景，组件层的代码会非常干净。

4. 让组合式函数更灵活：支持接收Ref或普通值 #

如果希望你的组合式函数不仅能接收Ref，还能接收普通的静态值，可以在内部用isRef和ref统一处理参数，让它更通用：

const useCircleStyle = ({ cx, cy, r }: {
  cx: Ref<number> | number,
  cy: Ref<number> | number,
  r: Ref<number> | number,
}) => {
  // 统一将参数转为Ref，不管外部传的是Ref还是普通值
  const cxRef = isRef(cx) ? cx : ref(cx);
  const cyRef = isRef(cy) ? cy : ref(cy);
  const rRef = isRef(r) ? r : ref(r);

  const circleStyle = computed(() => `
    cx: ${cxRef.value}px;
    cy: ${cyRef.value}px;
    r: ${rRef.value}px;
  `);

  return { circleStyle };
};

这样不管你在组件里传的是props.cx（通过toRefs转的Ref）还是一个普通数字100，组合式函数都能正常工作并保持响应式（如果是Ref的话）。

总的来说，核心思路就是尽量用批量处理工具减少重复代码，在响应式回调里安全使用unref简化.value，同时根据场景选择最适合的参数传递方式。这样既能保持响应式，又能让代码更简洁易维护。

备注：内容来源于stack exchange，提问作者Bjarne Herrmann