Vue 3如何在使用Props前预处理对象或JSON字符串类型的Props？

推荐方案1：使用计算属性（最简洁规范） #

计算属性是这类场景的最优解——它会自动监听props.data的变化，每次接收新值时都执行转换逻辑，既不会修改原始Props（完全符合代码规范，不会触发linter报错），也无需额外的响应式变量。

代码示例：

<script setup>
const props = defineProps({
  data: {
    type: [Object, String],
    required: true // 根据实际业务调整是否必填
  }
});

const processedData = computed(() => {
  // 处理JSON字符串转对象，添加错误捕获避免组件崩溃
  if (typeof props.data === 'string') {
    try {
      return JSON.parse(props.data);
    } catch (err) {
      console.error('data prop传入无效JSON字符串:', err);
      return {}; // 可根据业务需求返回原字符串或其他默认值
    }
  }
  // 已是对象则直接返回
  return props.data;
});
</script>

方案2：监听Props+普通变量（适合无需响应式的场景） #

如果确实不需要响应式的处理结果，可以用watch监听Props变化，将转换后的值存在普通变量中，避免冗余的响应式开销：

<script setup>
const props = defineProps({
  data: {
    type: [Object, String],
    required: true
  }
});

// 用普通变量存储处理后的值
let processedData = null;

// 封装转换逻辑为复用函数
const processRawData = (raw) => {
  if (typeof raw === 'string') {
    try {
      return JSON.parse(raw);
    } catch (err) {
      console.error('无效JSON格式:', err);
      return {};
    }
  }
  return raw;
};

// 初始化处理首次传入的Props
processedData = processRawData(props.data);

// 监听Props变化，实时更新处理结果
watch(() => props.data, (newVal) => {
  processedData = processRawData(newVal);
});
</script>

为什么你之前的default方法无效？ #

你猜的没错：defineProps的default选项仅在Props未传入、传入值为undefined时才会执行，无法对传入的字符串类型进行转换，这个思路本身不适用当前场景。

额外提醒 #

务必添加JSON.parse的错误捕获——如果父组件传入无效JSON字符串，直接解析会导致组件崩溃，增加错误处理能大幅提升组件的健壮性。

内容的提问来源于stack exchange，提问作者korguell