面试题：Vue 使用 v-for 遍历对象时，是按什么顺序遍历的？如何保证遍历顺序？

在 Vue 中使用 v-for 遍历对象时，其遍历顺序取决于 JavaScript 引擎对对象属性的枚举顺序，而这个顺序在 ES2015 (ES6) 之后是有明确规范的。

v-for 遍历对象的顺序

当你使用 v-for 遍历一个对象时：

<li v-for="(value, key, index) in myObject" :key="key">
  {{ index }}. {{ key }}: {{ value }}
</li>

遍历的顺序遵循以下规则（基于 ES2015+ 的 [[OwnPropertyKeys]] 规范）：

1. 数字键 (Numeric Keys)：
   • 所有可以被解析为正整数的字符串键（如 '1', '2', '100'）会首先被枚举，并且按数值大小升序排列。
   • 例如：'10', '1', '3' 会被排序为 '1', '3', '10'。
2. 字符串键 (String Keys)：
   • 接着是所有字符串类型的键，它们按照属性被创建时的顺序（即插入顺序）进行枚举。
3. Symbol 键 (Symbol Keys)：
   • 最后是所有 Symbol 类型的键，同样按照插入顺序枚举。

示例

data() {
  return {
    myObject: {
      '2': 'two',     // 数字键，会被排序
      '1': 'one',     // 数字键
      name: 'Alice',  // 字符串键，按插入顺序
      age: 25,        // 字符串键
      '10': 'ten'     // 数字键
    }
  }
}

v-for 的遍历顺序将是：

1. '1': ‘one’ (数字键，最小)
2. '2': ‘two’ (数字键)
3. '10': ‘ten’ (数字键)
4. name: ‘Alice’ (字符串键，先插入)
5. age: 25 (字符串键，后插入)

---

如何保证遍历顺序？

由于对象本身的遍历顺序可能不符合你的预期（尤其是当键是数字字符串时会被自动排序），最可靠、最推荐的方法是不要依赖对象的遍历顺序。如果你需要严格的、可预测的顺序，应该：

方法一：使用数组代替对象（推荐）

将数据结构改为数组，数组的索引天然具有顺序。

// 数据
data() {
  return {
    userList: [
      { id: 1, name: 'Alice', age: 25 },
      { id: 2, name: 'Bob', age: 30 },
      { id: 3, name: 'Charlie', age: 35 }
    ]
  }
}

<!-- 模板 -->
<li v-for="user in userList" :key="user.id">
  {{ user.name }} - {{ user.age }}
</li>

数组的顺序是严格按索引排列的，完全可控。

方法二：在遍历前对对象键进行排序

如果你必须使用对象，可以在 v-for 之前通过计算属性 (computed property) 对对象的键进行排序。

computed: {
  sortedEntries() {
    const obj = this.myObject;
    // 获取所有键，并按你的需求排序
    // 例如，按字符串键的字母顺序排序，忽略数字键的自动排序
    return Object.keys(obj)
      .sort((a, b) => a.localeCompare(b)) // 按字母顺序排序
      .map(key => ({ key, value: obj[key] }));
  }
}

<!-- 模板 -->
<li v-for="item in sortedEntries" :key="item.key">
  {{ item.key }}: {{ item.value }}
</li>

方法三：使用 Map 数据结构（Vue 2.7+ / Vue 3）

Map 对象会按插入顺序迭代其元素，顺序是可预测的。

data() {
  return {
    myMap: new Map([
      ['2', 'two'],
      ['1', 'one'],
      ['name', 'Alice'],
      ['age', 25]
    ])
  }
}

<!-- Map 可以直接用 v-for 遍历 -->
<li v-for="[key, value] in myMap" :key="key">
  {{ key }}: {{ value }}
</li>

Map 的遍历顺序就是插入顺序，不会对数字键进行特殊排序。

---

总结

• 默认顺序：v-for 遍历对象时，数字键按数值升序，字符串和 Symbol 键按插入顺序。
• 保证顺序：不要依赖对象的遍历顺序。如果需要严格顺序：
  1. 优先使用数组。
  2. 使用计算属性对 Object.keys() 的结果进行排序。
  3. 使用 Map 数据结构来存储需要保持插入顺序的数据。

在实际开发中，将需要有序展示的数据存储在数组中是最清晰、最不易出错的做法。