Vue 3 中优雅处理混合类型 Props（自动解析 JSON 字符串为对象）

在 Vue 3 中，当组件接收的 props 可能是原始对象或 JSON 字符串时，可通过 toRefs + computed 封装通用工具函数，在不污染响应式、不修改原始 props 的前提下，自动解析字符串为对象，实现类型统一与逻辑解耦。

在 vue 3 中，当组件接收的 props 可能是原始对象或 json 字符串时，可通过 `torefs` + `computed` 封装通用工具函数，在不污染响应式、不修改原始 props 的前提下，自动解析字符串为对象，实现类型统一与逻辑解耦。

在实际开发中，我们常遇到第三方组件或遗留系统传入的 props 类型不一致问题：例如 data prop 既可能是 { id: 1, name: "Vue" }，也可能是 '{"id":1,"name":"Vue"}'。Vue 3 的 defineProps 不支持对已传入的非空 props 进行运行时“清洗”，default 函数仅在 prop 未提供时触发，因此无法用于此场景。

直接在 setup 中手动判断并解析每个 prop（如 props.data && typeof props.data === 'string' ? JSON.parse(props.data) : props.data）虽可行，但重复、冗余且难以维护。更优解是封装一个可复用、类型安全的工具函数 —— unjsonProps。

该函数利用 Vue 的响应式核心机制：先通过 toRefs(props) 将 props 转为响应式引用对象，再对每个 ref 使用 computed 包装解析逻辑。这样既保留了响应式依赖追踪能力（如后续 props 更新，解析结果自动更新），又避免了副作用（不修改原始 props，不创建多余 ref）。

以下是完整实现（含 TypeScript 类型推导）：

// unjsonProps.tsimport { computed, toRefs, Ref } from 'vue'export function unjsonProps<T extends Record<string, any>>(props: T): {  [K in keyof T]: T[K] extends string ? ReturnType<typeof JSON.parse> : T[K]} {  const refs = toRefs(props)  return Object.fromEntries(    Object.entries(refs).map(([key, ref]) =>      [        key,        computed(() => {          const value = ref.value          return typeof value === 'string' ? JSON.parse(value) : value        })      ]    )  ) as any}

使用方式简洁直观：

<script setup lang="ts">import { unjsonProps } from './unjsonProps'import type { PropType } from 'vue'interface DataItem {  id: number  name: string}const props = defineProps({  data: {    type: [Object, String] as PropType<DataItem | string>,    required: true  },  config: {    type: [Object, String] as PropType<Record<string, unknown> | string>,    default: () => ({ theme: 'light' })  }})// ✅ 自动解析：无论 data 是对象还是 JSON 字符串，properProps.data 均为解析后的对象const properProps = unjsonProps(props)</script><template>  <div>    <p>ID: {{ properProps.data.value.id }}</p>    <p>Name: {{ properProps.data.value.name }}</p>    <p>Theme: {{ properProps.config.value.theme }}</p>  </div></template>

注意事项：

1. unjsonProps 返回的是一个计算属性对象，所有字段均为 ComputedRef，访问时需 .value（如 properProps.data.value）；
2. 若你明确不需要响应式（例如仅在 onMounted 中一次性读取），可改用 unref + toRaw 手动解析，但会丢失响应性；
3. JSON 解析存在抛错风险，生产环境建议增强健壮性（如包裹 try/catch 并提供默认值或警告）；
4. 该方案兼容 <script setup> 语法，无需额外生命周期钩子，零侵入、高内聚。

总结：unjsonProps 是 Vue 3 生态中处理“松散传参”场景的轻量级范式——它不违背 Composition API 设计哲学，以声明式、类型友好、可组合的方式，将数据规范化逻辑从业务组件中剥离，显著提升可维护性与复用性。