在 Vue 3 中渲染 JSON 數據通常涉及將 JSON 對象解析成 Vue 組件可以使用的格式，并將其展示在頁面上。

以下是一些步驟和代碼示例，展示如何將 JSON 數據渲染到 Vue 應用中：

步驟 1: 獲取 JSON 數據

首先，你需要獲取 JSON 數據。

這可以通過多種方式完成，比如從服務器請求數據或者從本地存儲加載數據。

步驟 2: 解析 JSON 數據

一旦你有了 JSON 數據，可以將其解析成 JavaScript 對象。

如果數據是字符串形式，你可以使用 JSON.parse() 方法進行解析。

步驟 3: 使用 Vue 渲染數據

接下來，你可以使用 Vue 的模板語法來渲染數據。

這通常涉及到使用 v-for 指令來循環遍歷數組，或者簡單地綁定對象的屬性到模板中的元素。

示例代碼

假設你有一個 JSON 字符串如下：

{
  "users": [
    {"name": "Alice", "age": 30},
    {"name": "Bob", "age": 25}
  ]
}

你可以這樣在 Vue 3 中渲染它：

<template>
  <div id="app">
    <ul>
      <!-- 使用 v-for 遍歷 users 數組 -->
      <li v-for="user in users" :key="user.name">
        {{ user.name }} - {{ user.age }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 假設這是從服務器獲取的 JSON 數據
const jsonData = '{"users":[{"name":"Alice","age":30},{"name":"Bob","age":25}]}';

// 解析 JSON 數據
const users = ref(JSON.parse(jsonData).users);

onMounted(() => {
  // 在組件掛載后，可以在這里做一些事情，比如請求數據等
});
</script>

注意事項

• 如果 JSON 數據是從服務器獲取的，請確保在適當的位置（如 mounted 生命周期鉤子或組合式 API 中的 onMounted）請求數據，并且在請求完成后設置數據。
• 使用 ref 來創建響應式的對象或數組，這樣當數據改變時 Vue 會自動更新視圖。
• 如果 JSON 數據結構比較復雜，可能需要額外的邏輯來轉換數據，使其適應你的組件結構。

以上就是如何在 Vue 3 中渲染 JSON 數據的基本步驟。

根據實際情況，你可能還需要處理更復雜的邏輯，如錯誤處理、狀態管理等。