el-collapse-item的ref的$el为什么会倒叙

在使用 `el-collapse` 组件时，`el-collapse-item` 组件的 `ref` 属性所绑定的是该组件的实例对象。而在 `el-collapse` 组件渲染时，会将所有 `el-collapse-item` 组件按照传入的顺序进行遍历，然后依次渲染，这样就会导致最后一个 `el-collapse-item` 组件的实例对象最先被绑定到 `$refs` 中，而第一个 `el-collapse-item` 组件的实例对象最后被绑定到 `$refs` 中，所以 `$refs` 中的顺序是倒序的。

如果需要按照传入的顺序访问 `el-collapse-item` 组件的实例对象，可以通过在组件中添加一个 `index` 属性来存储组件的顺序，然后在访问时按照该属性排序。例如：

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item v-for="(item, index) in list" :key="item.id" :title="item.title" :index="index" ref="items">
      {{ item.content }}
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: [],
      list: [
        { id: 1, title: '标题1', content: '内容1' },
        { id: 2, title: '标题2', content: '内容2' },
        { id: 3, title: '标题3', content: '内容3' }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 按照 index 属性排序
      const items = this.$refs.items.sort((a, b) => a.index - b.index)
      console.log(items)
    })
  }
}
</script>