Vue3中JSON字符串轉對象的常用方法小結

更新時間：2025年09月23日 10:05:09 作者：BillKu

這篇文章主要介紹了Vue3中將JSON字符串轉對象的三種方法：推薦使用JSON.parse(),安全且性能好,但需嚴格格式和錯誤處理；eval()不推薦,因安全風險和性能差,建議始終用try...catch包裹,確保應用穩(wěn)健,需要的朋友可以參考下

JSON 字符串轉對象方法

1. 使用 JSON.parse()（推薦）

JSON.parse() 是瀏覽器原生的方法，它能夠將符合 JSON 格式的字符串轉換為 JavaScript 對象。

const jsonString = '{"name": "John", "age": 30, "city": "New York"}';
// 使用 JSON.parse() 進行轉換
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // 輸出: John

重要：添加錯誤處理

JSON 字符串格式必須嚴格合法（例如，屬性名必須用雙引號括起來），否則 JSON.parse() 會拋出錯誤。務必使用 try...catch 進行錯誤處理：

let jsonObject;
try {
  jsonObject = JSON.parse(jsonString);
  console.log('轉換成功', jsonObject);
} catch (error) {
  console.error("JSON 解析失敗:", error);
  // 在這里可以進行容錯處理，例如設置一個默認空對象
  jsonObject = {};
}

2. 使用 eval()（不推薦，了解即可）

eval() 函數(shù)可以執(zhí)行字符串中的 JavaScript 代碼，因此也能解析 JSON 字符串。

const jsonString = '{"name": "John", "age": 30, "city": "New York"}';
const jsonObject = eval('(' + jsonString + ')'); // 注意這里的括號
console.log(jsonObject);

為什么不推薦 eval()？

安全性風險：eval() 會執(zhí)行字符串中的任何代碼。如果字符串來源不可信（例如來自用戶輸入或第三方），可能包含惡意腳本，導致嚴重的安全漏洞（XSS 攻擊）。
性能較差：eval() 的執(zhí)行速度通常比 JSON.parse() 慢。

因此，除非有特殊理由并且你能完全控制字符串來源，否則請始終使用 JSON.parse()。

3. 在 Vue 組件中的使用示例

在實際的 Vue 3 組件中，你可能會在 生命周期鉤子、方法或 計算屬性 中進行轉換。

示例：處理來自 API 的 JSON 數(shù)據(jù)

許多時候，JSON 字符串來源于后端 API 的響應。

<template>
  <div>
    <h1>User Info</h1>
    <p v-if="user">Name: {{ user.name }}</p>
    <p v-if="user">Age: {{ user.age }}</p>
    <p v-if="user">City: {{ user.city }}</p>
    <p v-else>Loading...</p>
  </div>
</template>

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

export default {
  setup() {
    const user = ref(null); // 初始值為 null

    onMounted(async () => {
      // 模擬從 API 獲取到一個 JSON 字符串
      const responseJsonString = '{"name": "Alice", "age": 25, "city": "London"}';

      try {
        // 1. 將字符串解析為對象
        const userData = JSON.parse(responseJsonString);
        // 2. 將響應式變量賦值
        user.value = userData;
      } catch (error) {
        console.error("Error parsing JSON:", error);
        // 處理錯誤，例如設置一個默認用戶對象或顯示錯誤信息
        user.value = { name: 'Unknown', age: 0, city: 'Nowhere' };
      }
    });

    return {
      user
    };
  }
};
</script>

示例：使用計算屬性（Computed）

如果字符串是響應式的（例如來自 ref 或 reactive），你可以使用計算屬性自動進行轉換和派生。

<template>
  <div>
    <p>Name: {{ userObject?.name }}</p>
    <p>Age: {{ userObject?.age }}</p>
  </div>
</template>

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

export default {
  setup() {
    const jsonString = ref('{"name": "Bob", "age": 40}');

    const userObject = computed(() => {
      try {
        return JSON.parse(jsonString.value);
      } catch (error) {
        console.error("Computed property parsing failed:", error);
        return null;
      }
    });

    return {
      userObject
    };
  }
};
</script>

注意事項

嚴格的 JSON 格式：JSON.parse() 要求字符串必須是標準的 JSON 格式。

? 正確：'{"name": "John", "age": 30}' (鍵和字符串值都用雙引號)
? 錯誤："{name: 'John', age: 30}" (鍵沒有引號，值用了單引號)

安全性：始終對要解析的字符串來源保持警惕，特別是對于來自用戶輸入或第三方 API 的數(shù)據(jù)。使用 try...catch 是防止應用崩潰的關鍵。

Vue 的響應性：使用 JSON.parse() 返回的是一個普通對象，你需要將其賦值給 Vue 的響應式變量（如 ref 或 reactive）才能在模板中觸發(fā)更新。

qs 庫并非用于此場景：搜索結果中提到的 qs 庫主要用于解析 URL 查詢字符串 (如 a=1&b=2)，而不是標準的 JSON 字符串。處理標準 JSON，JSON.parse() 就夠了。

總結

方法	推薦度	優(yōu)點	缺點	適用場景
JSON.parse()	★★★★★	標準、安全、性能好	要求嚴格的 JSON 格式	絕大多數(shù)場景
eval()	★☆☆☆☆	能解析非標準格式	極高安全風險、性能差、需謹慎處理括號	應避免，僅在極端受控環(huán)境下