10.4 实战：支持搜索和筛选的用户列表示例

在Web开发中，列表展示与数据操作是基础且核心的功能之一。本章节将深入探讨如何结合TypeScript和Vue.js框架，构建一个支持搜索和筛选功能的用户列表示例。我们将从项目初始化、数据模型定义、组件设计、逻辑实现到最终的界面展示，全面覆盖这一功能的开发过程。

10.4.1 项目初始化与依赖安装

首先，确保你已经安装了Node.js和npm/yarn。接下来，我们将使用Vue CLI来快速搭建项目框架。如果尚未安装Vue CLI，可以通过npm全局安装：

npm install -g @vue/cli
# 或者使用yarn
yarn global add @vue/cli

然后，创建一个新的Vue项目，并添加TypeScript支持：

vue create vue-user-list-with-search-and-filter
# 在选择特性时，确保选中了TypeScript和Vuex（如果需要状态管理）

进入项目目录，并安装可能需要的额外依赖，如axios用于HTTP请求（模拟从服务器获取数据）：

cd vue-user-list-with-search-and-filter
npm install axios
# 或者使用yarn
yarn add axios

10.4.2 数据模型定义

在TypeScript中，我们首先定义用户的数据模型。在src/types目录下创建一个User.ts文件（如果没有types目录，请自行创建）：

// src/types/User.ts
export interface User {
  id: number;
  name: string;
  email: string;
  age: number;
  // 可以根据需要添加更多字段
}

10.4.3 组件结构设计

对于本示例，我们将主要关注三个组件：

1. UserList.vue：主列表组件，负责展示用户列表，并包含搜索和筛选功能。
2. UserItem.vue：单个用户项的组件，用于渲染每个用户的数据。
3. SearchAndFilter.vue（可选）：一个可复用的搜索和筛选表单组件，如果列表功能复杂，可单独封装。

10.4.4 UserList.vue 实现

在src/components目录下创建UserList.vue。此组件将包含数据获取逻辑、搜索逻辑、筛选逻辑以及用户列表的渲染。

<template>
  <div>
    <input type="text" v-model="searchQuery" placeholder="Search users...">
    <!-- 假设有年龄筛选，实际项目中可根据需要添加更多筛选条件 -->
    <select v-model="ageFilter">
      <option value="">All Ages</option>
      <option value="18">18+</option>
      <option value="25">25+</option>
      <!-- 更多选项 -->
    </select>
    <ul>
      <user-item
        v-for="user in filteredUsers"
        :key="user.id"
        :user="user"
      />
    </ul>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { User } from '@/types/User'; // 引入用户类型定义
import axios from 'axios';
export default defineComponent({
  name: 'UserList',
  components: {
    UserItem: () => import('./UserItem.vue')
  },
  setup() {
    const users = ref<User[]>([]);
    const searchQuery = ref('');
    const ageFilter = ref('');
    // 假设函数fetchUsers从API获取用户数据
    const fetchUsers = async () => {
      // 模拟API请求
      const response = await axios.get('https://jsonplaceholder.typicode.com/users');
      users.value = response.data as User[];
    };
    // 组件挂载时获取数据
    fetchUsers();
    // 计算属性，用于过滤用户列表
    const filteredUsers = computed(() => {
      return users.value.filter(user => {
        if (searchQuery.value.trim() !== '') {
          // 搜索功能，这里简单使用name和email包含搜索词
          return user.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                 user.email.toLowerCase().includes(searchQuery.value.toLowerCase());
        }
        if (ageFilter.value !== '') {
          // 筛选功能
          return user.age >= parseInt(ageFilter.value, 10);
        }
        // 无搜索和筛选时，返回所有用户
        return true;
      });
    });
    return { users, searchQuery, ageFilter, filteredUsers };
  }
});
</script>

10.4.5 UserItem.vue 实现

接下来，创建UserItem.vue来展示单个用户的信息。

<template>
  <li>{{ user.name }} - {{ user.email }} (Age: {{ user.age }})</li>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { User } from '@/types/User';
export default defineComponent({
  name: 'UserItem',
  props: {
    user: {
      type: Object as PropType<User>,
      required: true
    }
  }
});
</script>

10.4.6 样式与响应式优化

为了提升用户体验，你可以为UserList.vue和UserItem.vue添加CSS样式。此外，考虑到性能和响应式，确保在数据量大时优化列表渲染，比如使用虚拟滚动等技术。

10.4.7 测试与调试

在开发过程中，不断进行测试和调试是非常重要的。你可以使用Vue Devtools这样的浏览器扩展来帮助你检查和调试Vue组件。同时，编写单元测试（如使用Jest和Vue Test Utils）也是保证代码质量的有效手段。

10.4.8 总结

通过本章节的实战示例，我们学习了如何在Vue.js和TypeScript环境下，构建一个支持搜索和筛选功能的用户列表示例。我们涵盖了从项目初始化、数据模型定义、组件设计到逻辑实现的全过程，并简单讨论了样式和响应式优化以及测试与调试的重要性。希望这个示例能帮助你更好地理解和应用Vue.js和TypeScript在Web开发中的强大功能。