Vue3从Supabase取JSON赋值给ref：访问属性报错的正确修复方式？

修复方式的正确性 #

你将const jsondata = ref()改为const jsondata = ref({})的修复方式是完全正确的。

原因很直接：页面刷新时，组件初始化阶段jsondata的初始值是undefined，模板中直接访问jsondata.title相当于读取undefined.title，自然抛出"Cannot read properties of undefined"错误；而热重载时组件可能保留了之前的缓存数据，初始状态并非undefined，所以不会报错。将初始值设为空对象后，即使数据未加载完成，jsondata也是一个存在的对象，访问其title属性只会得到undefined，不会触发报错，等异步请求完成后数据更新，模板也会自动渲染正确内容。

异步数据的其他处理方式 #

除了初始化空对象，还有几种常用的方案处理异步数据加载前的状态：

1. 使用可选链操作符 #

在模板中通过?.安全访问属性，即使jsondata为undefined也不会报错：

{{ jsondata?.title }}

2. 条件渲染 #

通过v-if判断数据是否加载完成，未完成时显示加载提示：

<template>
  <main class="flex-1">
    <!-- ...其他内容... -->
    <div v-if="jsondata">
      {{ jsondata.title }}
    </div>
    <div v-else>加载中...</div>
    <!-- ...其他内容... -->
  </main>
</template>

3. 结合Suspense组件（Vue3特性） #

利用Vue3的Suspense组件统一处理异步加载状态，需要将数据请求改为同步写法（直接在setup中await）：

<template>
  <Suspense>
    <template #default>
      <main class="flex-1">
        <!-- ...其他内容... -->
        {{ jsondata.title }}
        <!-- ...其他内容... -->
      </main>
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

<script setup>
import { ref } from "vue";
import { supabase } from "@/libary/supabaseClient";

// 直接在setup中await请求，Suspense会自动处理加载状态
const { data } = await supabase.from("books").select("*").limit(1).single();
const jsondata = ref(data);
</script>

注意：Suspense在路由场景下使用时，需要配合异步路由组件。

4. 设置结构化默认值 #

如果知道返回数据的结构，可以初始化一个匹配的默认值，避免初始渲染时出现空白或undefined：

const jsondata = ref({
  title: '',
  author: '',
  metadata: {
    ages: [],
    price: 0,
    description: ''
  }
});

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