Vue 3组合式API计算属性返回undefined问题求解

你的问题出在三个核心点上：

1. <script setup> 语法里不存在组件实例的this，所以用this必然返回undefined；
2. fourDigits是input这个响应式对象的内部属性，直接写fourDigits找不到它，必须通过input.fourDigits访问；
3. 计算属性不应该嵌套在reactive对象内部初始化，这不符合Vue响应式系统的规范。

给你两种实用的解决写法：

写法一：将计算属性挂载到响应式对象上 #

<script setup>
import { computed, reactive } from 'vue'

const input = reactive({
    fourDigits: [1,2,3,4] // 推荐用数组字面量，比Array构造函数更直观易懂
})

// 定义计算属性后挂载到input对象上
input.firstDigit = computed(() => {
  return input.fourDigits[0]
})
</script>

<template>
   <div>
     <pre>
       {{JSON.stringify(input.firstDigit, null, 2)}}
     </pre>
   </div>
</template>

写法二：单独定义计算属性（更推荐） #

把计算属性作为顶层变量，代码结构更清晰，模板中也能直接使用：

<script setup>
import { computed, reactive } from 'vue'

const input = reactive({
    fourDigits: [1,2,3,4]
})

// 单独定义计算属性
const firstDigit = computed(() => input.fourDigits[0])
</script>

<template>
   <div>
     <pre>
       {{JSON.stringify(firstDigit, null, 2)}}
     </pre>
   </div>
</template>

简单总结：在<script setup>里，直接通过响应式对象（比如这里的input）访问内部属性即可，不要用this；计算属性尽量单独定义，或者挂载到响应式对象上，避免嵌套在reactive里初始化。

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