Vue Composition API：模板访问JSON属性时控制台报错问题

核心报错原因 #

• 异步请求未完成时模板提前渲染，此时dataPerson.value为undefined，尝试读取其FirstName属性触发TypeError。
• 你混淆了reactive与ref的用法：reactive创建的响应式对象无需通过.value访问属性，而你模板中使用了.value，要么是初始化dataPerson的结构有误，要么是错误地将reactive对象按ref的方式访问。

具体问题拆解 #

1. 初始化缺失默认结构：用reactive创建dataPerson时，大概率未给value属性设置初始空对象（比如仅写const dataPerson = reactive({})），导致初始状态下dataPerson.value为undefined，模板渲染时直接读取FirstName就会报错。
2. API用法混淆：reactive是针对对象/数组的响应式包装，直接访问属性即可（如dataPerson.FirstName）；.value是ref对象的专属访问方式，你模板中的写法说明把两种API的用法搞混了。

修复方案 #

方案1：修正reactive的标准用法 #

• 初始化时给dataPerson设置完整默认结构，请求返回后直接赋值：

import { reactive, onBeforeMount } from 'vue'
import axios from 'axios'

const dataPerson = reactive({
  UID_Person: '',
  LastName: '',
  FirstName: '',
  Birthdate: ''
})

onBeforeMount(async () => {
  const res = await axios.get('你的接口地址')
  Object.assign(dataPerson, res.data)
})

• 模板中直接访问属性：

<template>
  <div>{{ dataPerson.FirstName }}</div>
</template>

方案2：改用ref并添加可选链 #

• 若习惯用ref，初始化时设置空对象，模板用可选链避免未就绪时的报错：

import { ref, onBeforeMount } from 'vue'
import axios from 'axios'

const dataPerson = ref({})

onBeforeMount(async () => {
  const res = await axios.get('你的接口地址')
  dataPerson.value = res.data
})

• 模板写法：

<template>
  <div>{{ dataPerson.value?.FirstName }}</div>
</template>

方案3：添加加载状态判断 #

• 通过加载状态控制渲染，避免请求未完成时渲染未就绪的数据：

import { reactive, ref, onBeforeMount } from 'vue'
import axios from 'axios'

const dataPerson = reactive({})
const isLoading = ref(true)

onBeforeMount(async () => {
  const res = await axios.get('你的接口地址')
  Object.assign(dataPerson, res.data)
  isLoading.value = false
})

• 模板写法：

<template>
  <div v-if="isLoading">加载中...</div>
  <div v-else>{{ dataPerson.FirstName }}</div>
</template>

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