vue如何循环json

Vue.js 中优雅地循环与渲染 JSON 数据**

在现代前端开发中，Vue.js 以其响应式和组件化的特性备受青睐，处理和展示从后端获取的 JSON 数据是日常开发中的常见任务，而循环（遍历）JSON 数据并将其动态渲染到页面上，则是 Vue 模板引擎的核心能力之一，本文将详细介绍在 Vue 中如何高效、优雅地循环 JSON 数据，涵盖常见场景、最佳实践以及一些高级技巧。

为什么需要循环 JSON？

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，前端应用通常从 API 接口获取 JSON 格式的数据，例如用户列表、商品信息、文章内容等，这些数据往往以数组或对象的形式存在，为了在页面上展示这些数据集合，我们需要通过循环的方式，为集合中的每一项生成对应的 DOM 元素或组件。

Vue 提供了强大的指令来简化这一过程，最常用的就是 v-for 指令。

核心指令：v-for

v-for 指令基于一个数组或对象来渲染一个列表,其基本语法如下：

<!-- 遍历数组 -->
<div v-for="item in items" :key="item.id">
  {{ item.name }}
</div>
<!-- 遍历对象 -->
<div v-for="(value, key, index) in object" :key="key">
  {{ key }}: {{ value }}
</div>

遍历 JSON 数组

这是最常见的情况，假设我们从 API 获取了如下 JSON 数据：

[
  { "id": 1, "name": "Alice", "age": 25 },
  { "id": 2, "name": "Bob", "age": 30 },
  { "id": 3, "name": "Charlie", "age": 28 }
]

在 Vue 组件中,我们可以这样处理和渲染：

<template>
  <div>
    <h2>用户列表</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.age }}岁
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [
        { "id": 1, "name": "Alice", "age": 25 },
        { "id": 2, "name": "Bob", "age": 30 },
        { "id": 3, "name": "Charlie", "age": 28 }
      ]
    };
  }
};
</script>

说明：

• v-for="user in users"：users 是我们在 data 中定义的数组。user 是当前遍历到的元素,每次循环都会被赋予数组中一个不同的对象。
• key="user.id"：key 是 Vue 用于追踪每个节点的身份，从而重用和重新排序现有 DOM 元素的关键。强烈建议为 v-for 提供唯一的 key，最好是数据中的唯一标识符（如 id），避免使用索引（index）作为 key,除非数据是静态的或你不关心列表的重新排序。

遍历 JSON 对象

JSON 数据是一个对象而非数组。

{
  "name": "John Doe",
  "age": 40,
  "email": "john.doe@example.com",
  "address": {
    "street": "123 Main St",
    "city": "Anytown"
  }
}

遍历对象时，v-for 提供了更多的参数：

<template>
  <div>
    <h2>用户信息</h2>
    <div v-for="(value, key, index) in userInfo" :key="key">
      {{ index + 1 }}. {{ key }}: {{ value }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {
        "name": "John Doe",
        "age": 40,
        "email": "john.doe@example.com",
        "address": {
          "street": "123 Main St",
          "city": "Anytown"
        }
      }
    };
  }
};
</script>

说明：

• v-for="(value, key, index) in userInfo"：
  • value：当前属性的值。
  • key：当前属性的键（字符串）。
  • index：当前属性的索引（从 0 开始）。
• key="key"：遍历对象时，可以使用 key 作为 key 值,因为对象的键是唯一的。

遍历对象的特定属性（仅遍历可枚举属性）

如果你只想遍历对象自身可枚举的属性（不包括原型链上的属性），可以结合 Object.keys()、Object.values() 或 Object.entries() 使用。

<template>
  <div>
    <h2>仅遍历可枚举属性名</h2>
    <div v-for="key in Object.keys(userInfo)" :key="key">
      {{ key }}
    </div>
    <h2>仅遍历可枚举属性值</h2>
    <div v-for="value in Object.values(userInfo)" :key="value">
      {{ value }}
    </div>
    <h2>遍历 [key, value] 数组</h2>
    <div v-for="(value, key) in Object.entries(userInfo)" :key="key">
      {{ key }}: {{ value }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {
        "name": "John Doe",
        "age": 40,
        "email": "john.doe@example.com"
      }
    };
  }
};
</script>

从 API 获取并循环 JSON 数据

实际开发中，JSON 数据通常来自 API 请求，我们可以使用 Vue 的生命周期钩子（如 created 或 mounted）或组合式 API（Composition API）中的 onMounted 来获取数据。

示例（Options API）：

<template>
  <div>
    <h2>API 获取的用户列表</h2>
    <div v-if="loading">加载中...</div>
    <div v-else-if="error">{{ error }}</div>
    <ul v-else>
      <li v-for="user in apiUsers" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      apiUsers: [],
      loading: false,
      error: null
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      this.loading = true;
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        this.apiUsers = await response.json();
      } catch (err) {
        this.error = err.message;
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

示例（Composition API - Vue 3）：

<template>
  <div>
    <h2>API 获取的用户列表 (Composition API)</h2>
    <div v-if="loading">加载中...</div>
    <div v-else-if="error">{{ error }}</div>
    <ul v-else>
      <li v-for="user in apiUsers" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
  setup() {
    const apiUsers = ref([]);
    const loading = ref(false);
    const error = ref(null);
    const fetchUsers = async () => {
      loading.value = true;
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        apiUsers.value = await response.json();
      } catch (err) {
        error.value = err.message;
      } finally {
        loading.value = false;
      }
    };
    onMounted(() => {
      fetchUsers();
    });
    return {
      apiUsers,
      loading,
      error
    };
  }
};
</script>

高级技巧与最佳实践

1. 使用 v-for 时务必绑定 key：如前所述，key 是 Vue 优化列表渲染的关键，它能帮助 Vue 识别节点，从而高效地更新 DOM,避免不必要的重新渲染和性能问题。

2. **避免在 v-for 中使用 `v-if