Vue2组合式API中无TypeScript时数字Ref报错及类型转换问题

报错原因与修复 #

报错原因 #

报错Cannot convert object to primitive value的核心原因是计算属性diff在组件初始化阶段首次执行时，props.maxVal并非有效数字类型。

计算属性会在组件初始化时立即执行一次，而onMounted是组件挂载完成后才触发的。此时：

• val.value还是初始值1（数字类型），但props.maxVal可能还未被父组件传入有效值（比如父组件异步加载数据，初始时maxVal为undefined、空对象或其他非数字类型）。
• 当非数字类型参与减法运算时，JS尝试将其转换为原始值失败，从而抛出该错误。你在onMounted中看到的val.value是数字，是因为此时父组件已完成传值，但这发生在计算属性首次报错之后。

修复方案 #

1. 给props设置默认数字值（推荐）

在组件的props定义中为maxVal指定默认数字，确保初始值有效：

const props = defineProps({
  maxVal: {
    type: Number,
    default: 0
  }
});

2. 在计算属性中做类型校验与转换

如果无法确保父组件初始传值为数字，可在计算属性中强制转换并处理异常情况：

const diff = computed(() => {
  const maxNum = Number(props.maxVal);
  const valNum = Number(val.value);
  return isNaN(maxNum) || isNaN(valNum) ? 0 : maxNum - valNum;
});

Vue3（无TypeScript）中转换Ref类型的方法 #

Vue3中Ref类型的值通过.value访问，转换类型直接使用原生JS的类型转换方法即可，常用方式如下：

• 转数字：使用Number()、parseInt()或parseFloat()

  const strRef = ref('123.45');
  const numVal = Number(strRef.value); // 123.45
  const intVal = parseInt(strRef.value); // 123
  

• 转字符串：使用String()或直接拼接空字符串

  const numRef = ref(123);
  const strVal = String(numRef.value); // "123"
  const strVal2 = numRef.value + ''; // "123"
  

• 转布尔值：使用Boolean()或双重取反!!

  const numRef = ref(0);
  const boolVal = Boolean(numRef.value); // false
  const boolVal2 = !!numRef.value; // false
  

• 不确定是否为Ref时用unref()简化
  unref(val)会自动判断：若为Ref则返回.value，否则返回原值，适合不确定变量类型的场景：

  const maybeRef = ref('456');
  const numVal = Number(unref(maybeRef)); // 456
  

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