快捷導(dǎo)航

Vue3中JSON字符串轉(zhuǎn)對象的常用方法小結(jié)

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

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

JSON 字符串轉(zhuǎn)對象方法

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

JSON.parse() 是瀏覽器原生的方法，它能夠?qū)⒎?JSON 格式的字符串轉(zhuǎn)換為 JavaScript 對象。

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

重要：添加錯(cuò)誤處理

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

let jsonObject;
try {
  jsonObject = JSON.parse(jsonString);
  console.log('轉(zhuǎn)換成功', jsonObject);
} catch (error) {
  console.error("JSON 解析失敗:", error);
  // 在這里可以進(jìn)行容錯(cuò)處理，例如設(shè)置一個(gè)默認(rèn)空對象
  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()？

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

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

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

在實(shí)際的 Vue 3 組件中，你可能會在 生命周期鉤子、方法或 計(jì)算屬性 中進(jìn)行轉(zhuǎn)換。

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

許多時(shí)候，JSON 字符串來源于后端 API 的響應(yīng)。

<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 獲取到一個(gè) JSON 字符串
      const responseJsonString = '{"name": "Alice", "age": 25, "city": "London"}';

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

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

示例：使用計(jì)算屬性（Computed）

如果字符串是響應(yīng)式的（例如來自 ref 或 reactive），你可以使用計(jì)算屬性自動(dòng)進(jìn)行轉(zhuǎn)換和派生。

<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>

注意事項(xiàng)

嚴(yán)格的 JSON 格式：JSON.parse() 要求字符串必須是標(biāo)準(zhǔn)的 JSON 格式。

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

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

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

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

總結(jié)

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