Vue3中JSON字符串转对象的常用方法小结

const jsonString = '{"name": "John", "age": 30, "city": "New York"}';
// 使用 JSON.parse() 进行转换
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // 输出: John

let jsonObject;
try {
  jsonObject = JSON.parse(jsonString);
  console.log('转换成功', jsonObject);
} catch (error) {
  console.error("JSON 解析失败:", error);
  // 在这里可以进行容错处理，例如设置一个默认空对象
  jsonObject = {};
}

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

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

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