vue3通讯录按名子首字母排序分组代码实现

以下是一个完整的 Vue 3 组件代码实现：

<template>
  <div>
    <div v-for="(contacts, letter) in groupedContacts" :key="letter">
      <h2>{{ letter }}</h2>
      <ul>
        <li v-for="contact in contacts" :key="contact.phone">{{ contact.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import pinyin from 'pinyin';

export default {
  setup() {
    const contacts = ref([
      { name: '张三', phone: '123456789' },
      { name: '李四', phone: '987654321' },
      { name: '王五', phone: '111111111' },
      { name: '赵六', phone: '222222222' },
      { name: '钱七', phone: '333333333' },
      { name: '孙八', phone: '444444444' },
      { name: '周九', phone: '555555555' },
      { name: '吴十', phone: '666666666' },
    ]);

    const groupedContacts = ref({});

    const initContacts = () => {
      const pinyinContacts = contacts.value.map(contact => {
        const pinyinName = pinyin(contact.name, { style: pinyin.STYLE_FIRST_LETTER }).join('');
        return { ...contact, pinyinName };
      });

      const groups = pinyinContacts.reduce((groups, contact) => {
        const firstLetter = contact.pinyinName[0].toUpperCase();
        if (!groups[firstLetter]) {
          groups[firstLetter] = [];
        }
        groups[firstLetter].push(contact);
        return groups;
      }, {});

      Object.keys(groups).forEach(key => {
        groups[key].sort((a, b) => a.name.localeCompare(b.name));
      });

      groupedContacts.value = groups;
    };

    initContacts();

    return {
      groupedContacts,
    };
  },
};
</script>

在这个示例中，我们使用了 Vue 3 的 `ref` 函数来创建响应式数据。然后使用 `setup` 函数来声明组件的逻辑，并在 `initContacts` 函数中进行分组和排序。最终在页面上渲染出分组后的通讯录。