一、
1.1 v-for 遍历对象的基础知识
在 Vue 2 和 Vue 3 中，v-for 指令除了遍历数组外，也完全支持直接遍历对象。
其最基础的语法形式为：v-for="(value, key, index) in object"。
在这个语法中，value 代表对象的属性值，key 代表对象的键名，index 则代表当前遍历到的键的索引，索引值总是从 0 开始。
Vue 在执行 v-for 渲染逻辑时，底层并不是直接通过属性名（如 obj.prop）去取值，而是通过调用 JavaScript 内置的 Object.keys() 方法获取对象的键数组。
1.2 遍历顺序的真相：Object.keys() 机制
核心结论： v-for 遍历对象的顺序，取决于 Object.keys() 的返回顺序。由于 V8 引擎对 Object.keys() 实现了特定的排序策略，这导致了遍历顺序并非简单的“插入顺序”。
V8 引擎在处理 Object.keys() 时，会将键分为数字键和非数字键两类分别处理：
这就解释了为什么有时候你会发现遍历出来的顺序和你预想的不一样。下图展示了从 Vue 组件接收数据到最终渲染 DOM 的完整流程。
#publish-mermaid-1785343776154-0{font-family:inherit;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#publish-mermaid-1785343776154-0 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#publish-mermaid-1785343776154-0 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#publish-mermaid-1785343776154-0 .error-icon{fill:#552222;}#publish-mermaid-1785343776154-0 .error-text{fill:#552222;stroke:#552222;}#publish-mermaid-1785343776154-0 .edge-thickness-normal{stroke-width:1px;}#publish-mermaid-1785343776154-0 .edge-thickness-thick{stroke-width:3.5px;}#publish-mermaid-1785343776154-0 .edge-pattern-solid{stroke-dasharray:0;}#publish-mermaid-1785343776154-0 .edge-thickness-invisible{stroke-width:0;fill:none;}#publish-mermaid-1785343776154-0 .edge-pattern-dashed{stroke-dasharray:3;}#publish-mermaid-1785343776154-0 .edge-pattern-dotted{stroke-dasharray:2;}#publish-mermaid-1785343776154-0 .marker{fill:#333333;stroke:#333333;}#publish-mermaid-1785343776154-0 .marker.cross{stroke:#333333;}#publish-mermaid-1785343776154-0 svg{font-family:inherit;font-size:16px;}#publish-mermaid-1785343776154-0 p{margin:0;}#publish-mermaid-1785343776154-0 .label{font-family:inherit;color:#333;}#publish-mermaid-1785343776154-0 .cluster-label text{fill:#333;}#publish-mermaid-1785343776154-0 .cluster-label span{color:#333;}#publish-mermaid-1785343776154-0 .cluster-label span p{background-color:transparent;}#publish-mermaid-1785343776154-0 .label text,#publish-mermaid-1785343776154-0 span{fill:#333;color:#333;}#publish-mermaid-1785343776154-0 .node rect,#publish-mermaid-1785343776154-0 .node circle,#publish-mermaid-1785343776154-0 .node ellipse,#publish-mermaid-1785343776154-0 .node polygon,#publish-mermaid-1785343776154-0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785343776154-0 .rough-node .label text,#publish-mermaid-1785343776154-0 .node .label text,#publish-mermaid-1785343776154-0 .image-shape .label,#publish-mermaid-1785343776154-0 .icon-shape .label{text-anchor:middle;}#publish-mermaid-1785343776154-0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#publish-mermaid-1785343776154-0 .rough-node .label,#publish-mermaid-1785343776154-0 .node .label,#publish-mermaid-1785343776154-0 .image-shape .label,#publish-mermaid-1785343776154-0 .icon-shape .label{text-align:center;}#publish-mermaid-1785343776154-0 .node.clickable{cursor:pointer;}#publish-mermaid-1785343776154-0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#publish-mermaid-1785343776154-0 .arrowheadPath{fill:#333333;}#publish-mermaid-1785343776154-0 .edgePath .path{stroke:#333333;stroke-width:1px;}#publish-mermaid-1785343776154-0 .flowchart-link{stroke:#333333;fill:none;}#publish-mermaid-1785343776154-0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785343776154-0 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#publish-mermaid-1785343776154-0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785343776154-0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#publish-mermaid-1785343776154-0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#publish-mermaid-1785343776154-0 .cluster text{fill:#333;}#publish-mermaid-1785343776154-0 .cluster span{color:#333;}#publish-mermaid-1785343776154-0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:inherit;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#publish-mermaid-1785343776154-0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#publish-mermaid-1785343776154-0 rect.text{fill:none;stroke-width:0;}#publish-mermaid-1785343776154-0 .icon-shape,#publish-mermaid-1785343776154-0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785343776154-0 .icon-shape p,#publish-mermaid-1785343776154-0 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#publish-mermaid-1785343776154-0 .icon-shape .label rect,#publish-mermaid-1785343776154-0 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785343776154-0 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#publish-mermaid-1785343776154-0 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#publish-mermaid-1785343776154-0 .node .neo-node{stroke:#9370DB;}#publish-mermaid-1785343776154-0 [data-look=\”neo\”].node rect,#publish-mermaid-1785343776154-0 [data-look=\”neo\”].cluster rect,#publish-mermaid-1785343776154-0 [data-look=\”neo\”].node polygon{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785343776154-0 [data-look=\”neo\”].swimlane.cluster rect{filter:none;}#publish-mermaid-1785343776154-0 [data-look=\”neo\”].node path{stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785343776154-0 [data-look=\”neo\”].node .outer-path{filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785343776154-0 [data-look=\”neo\”].node .neo-line path{stroke:#9370DB;filter:none;}#publish-mermaid-1785343776154-0 [data-look=\”neo\”].node circle{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785343776154-0 [data-look=\”neo\”].node circle .state-start{fill:#000000;}#publish-mermaid-1785343776154-0 [data-look=\”neo\”].icon-shape .icon{fill:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785343776154-0 [data-look=\”neo\”].icon-shape .icon-neo path{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785343776154-0 :root{–mermaid-font-family:inherit;}
数字键
字符串键
Vue 组件渲染
接收对象数据 data
Vue 内部调用 Object.keys
判断键的类型
按数值大小升序排列 0, 1, 2…
保持定义时的插入顺序
Vue 执行 v-for 循环
生成对应的 HTML 标签
1.3 场景分析
假设我们有以下数据结构：
const user = {
id: 1,
name: 'Tom',
age: 25,
score: 88,
address: 'Beijing'
};
当你对 user 使用 v-for 时：
const config = {
3: 'config3',
1: 'config1',
2: 'config2'
};
此时 Object.keys(config) 会返回 ['1', '2', '3']（数字键升序）。
二、
2.1 如何保证遍历顺序
如果在业务逻辑中，必须要求严格遵循某种顺序（例如必须是数字键的升序，或者字符串键的特定顺序），我们就不能完全依赖 v-for 的默认行为。
推荐方案一：使用 Object.keys().sort() 手动排序
这是最直接的方法。在渲染前，先将键数组进行排序，再交给 v-for。
推荐方案二：定义一个顺序数组映射
如果你需要复杂的自定义顺序，可以将所有需要的键按顺序放入一个数组中，然后在遍历时只取数组中存在的键。
2.2 代码演示与结果验证
下面我们通过代码来验证默认顺序与手动排序的区别。
<div id="app">
<h3>默认 v-for 遍历（数字键升序）</h3>
<div v-for="(val, key) in obj" :key="key">
{{ key }} : {{ val }}
</div>
<h3>手动排序后的 v-for</h3>
<div v-for="(val, key) in sortedObj" :key="key">
{{ key }} : {{ val }}
</div>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const obj = ref({
3: '数字键3',
1: '数字键1',
2: '数字键2',
name: '字符串键',
age: '30'
});
// 通过计算属性对键进行排序
const sortedObj = ref({});
// 策略1: 对所有键排序
// sortedObj.value = Object.fromEntries(
// Object.keys(obj.value).sort().map(key => [key, obj.value[key]])
// );
// 策略2: 仅对数字键排序，字符串键保持原序
const keys = Object.keys(obj.value);
keys.sort((a, b) => {
const numA = Number(a);
const numB = Number(b);
// 判断是否都是数字
if (!isNaN(numA) && !isNaN(numB)) {
return numA – numB;
}
return a.localeCompare(b);
});
sortedObj.value = Object.fromEntries(
keys.map(key => [key, obj.value[key]])
);
return { obj, sortedObj };
}
}).mount('#app');
输出结果分析：
在“默认 v-for”部分，你会看到 1, 2, 3 被打印出来，符合数字键升序规则。而在“手动排序后的 v-for”部分，我们通过 localeCompare 确保了字符串键的顺序优先，数字键依然按数值比较。
三、
3.1 最佳实践总结
3.2 扩展：CSS order 属性
如果遍历顺序主要用于 CSS 布局（例如 Flexbox 或 Grid 布局中的元素排列），最好的方式其实是利用 CSS 的 order 属性，而不是去修改 JavaScript 的数据结构。
你可以在 v-for 渲染的元素上动态绑定 order 值，由浏览器引擎控制渲染顺序，这样能减少不必要的 DOM 操作。
