让对象保持定义的顺序来排列

v-for循环中，当遍历对象时，一般都会自己给对象排序了，比如说属性的key是数字时：

const a = {
  0: 'aaa',
  2: 'ccc',
  1: 'ddd'
}

当去循环它的时候，它就会自己给我们按照012排序了，但我们又不想让它自己给我们排序。

我就想它按 aaa bbb ddd 排序。不要给我按key的值去排序。

想了这种解决方法，结果不行，好像也没按照我定义的顺序来，（因为现代js不保证对象属性的顺序）。

下面就是将对象换成数组这种强制手动维护顺序：

<script setup>
import { ref, computed } from 'vue'

const msg = ref('Hello World!')
const obj = ref({
  0: 'aaa',
  2: 'bbb',
  1: 'ddd'
})
const objOrder = ref([0, 2, 1])

const orderedObj = computed(() => objOrder.value.map(key => (
  {
    key,
    value: obj.value[key]
  }
)))
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
  <div v-for="([key, value], index) in Object.entries(obj)" :key="index">{{ key }} - {{ value}}</div>

{{orderedObj }}
  <div v-for="item in orderedObj">
    {{ item.key }}: {{ item.value }}
  </div>
</template>

这种写法就行：