Vue3优雅处理混合类型props：自动解析JSON字符串

在 Vue 3 开发中，面对第三方或遗留系统传入的混合类型 props（如既可能是原始对象又可能是 JSON 字符串），直接手动解析不仅重复冗余、难以维护，还容易破坏响应式链路；本文介绍了一种优雅、轻量且类型安全的解决方案——通过 `toRefs` 与 `computed` 封装通用工具函数 `unjsonProps`，在不修改原始 props、不污染响应式系统、无需额外生命周期的前提下，自动将字符串形式的 JSON 解析为标准对象，实现类型统一、逻辑解耦与响应式更新，让松散传参场景下的组件开发更健壮、可复用且符合 Composition API 的设计哲学。

在 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.ts
import { 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>

⚠️ 注意事项：

• unjsonProps 返回的是一个计算属性对象，所有字段均为 ComputedRef，访问时需 .value（如 properProps.data.value）；
• 若你明确不需要响应式（例如仅在 onMounted 中一次性读取），可改用 unref + toRaw 手动解析，但会丢失响应性；
• JSON 解析存在抛错风险，生产环境建议增强健壮性（如包裹 try/catch 并提供默认值或警告）；
• 该方案兼容