Vue中Options API转Composition API遇语法错误求助

1. 语法错误根源 #

你写的Composition API代码不符合Vue 3的语法规范：

• Composition API中计算属性必须通过computed()函数创建，不能沿用Options API里直接写total () {...}的写法，这就是你遇到「缺少分号」解析错误的核心原因。
• 另外如果items是用ref声明的响应式数组，你需要通过items.value才能访问到数组本身。

2. 正确代码示例 #

分两种常见情况给出修正后的代码：

情况1：items是ref数组，且每个item的qty/price是普通属性（非ref）

import { computed } from 'vue'

// 假设你已经用ref声明了items
const items = ref([/* 你的商品数据 */])

const total = computed(() => {
  return items.value.reduce((total, item) => {
    return total + item.qty * item.price
  }, 0)
})

情况2：items是ref数组，且每个item的qty/price是ref响应式属性

import { computed } from 'vue'

const items = ref([/* 每个item的qty和price都是ref，比如 { qty: ref(1), price: ref(10) } */])

const total = computed(() => {
  return items.value.reduce((total, item) => {
    return total + item.qty.value * item.price.value
  }, 0)
})

3. 关键注意点 #

• 所有计算逻辑必须放在computed()的回调函数里，这是Vue 3 Composition API的强制要求。
• 访问ref类型的响应式数据时，必须通过.value；如果是reactive声明的对象/数组，则直接访问即可（比如const items = reactive([...])的话，不用items.value，直接items.reduce(...)）。

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