【愚公系列】《循序渐进Vue.js 3.x前端开发实践》036-案例：实现支持搜索和筛选的用户列表

愚公搬代码

发布于 2025-06-02 17:41:45

14100

代码可运行

运行总次数：0

代码可运行

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在现代 web 应用中，用户列表的展示是一个常见且重要的功能。随着数据量的增加，如何高效地搜索和筛选用户信息，提升用户体验，成为开发者必须面对的挑战。在这篇文章中，我们将通过一个具体的案例，深入探讨如何实现一个支持搜索和筛选功能的用户列表。

我们将采用 Vue.js 框架，结合响应式编程和组件化设计，来构建一个直观且易于使用的用户列表界面。你将学习到如何利用 Vue 的数据绑定特性，结合过滤器和计算属性，实现动态的搜索和筛选功能。同时，我们还会关注性能优化和用户体验，确保在处理大量数据时，应用依然流畅。

🚀一、用户列表

🔎1. HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .container {
            margin: 50px;
        }
        .content {
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="Application">
        <div class="container">
            <div class="content">
                <input type="radio" :value="-1" v-model="sexFliter"/>全部
                <input type="radio" :value="0" v-model="sexFliter"/>男
                <input type="radio" :value="1" v-model="sexFliter"/>女
            </div>
            <div class="content">搜索：<input type="text" v-model="searchKey" /></div>
            <div class="content">
                <table border="1" width="300px">
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                    </tr>
                    <tr v-for="(data, index) in showDatas">
                        <td>{{data.name}}</td>
                        <td>{{data.sex == 0 ? '男' : '女'}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <script> ... </script>
</body>
</html>

页面结构：页面中有一个容器（.container），里面包含了性别筛选的单选框、搜索框以及一个表格。
- 性别筛选：提供了三个单选框，分别是“全部”、“男”和“女”，通过 v-model="sexFliter" 来绑定值和 Vue 的数据。
- 搜索框：一个简单的输入框，用户可以输入名字进行搜索。
- 表格：显示数据的表格，列出每个用户的姓名和性别。

🔎2. Vue 3 的 JavaScript 部分

🦋2.1 数据与组件初始化

let mock = [
    { name:"小王", sex:0 },
    { name:"小红", sex:1 },
    { name:"小李", sex:1 },
    { name:"小张", sex:0 }
]

const App = Vue.createApp({
    data() {
        return {
            sexFliter: -1,  // 性别筛选（-1: 全部, 0: 男, 1: 女）
            showDatas: [],  // 用于显示的数据
            searchKey: ""   // 搜索关键词
        }
    },
    mounted() {
        // 模拟请求过程
        setTimeout(this.queryAllData, 3000); // 模拟3秒后加载数据
    },
    methods: {
        queryAllData() {
            this.showDatas = mock;  // 模拟从服务端请求数据
        },
        fliterData() {
            this.searchKey = "";  // 清空搜索内容
            if (this.sexFliter === -1) {
                this.showDatas = mock;  // 显示所有数据
            } else {
                this.showDatas = mock.filter((data) => {
                    return data.sex === this.sexFliter;  // 根据性别筛选数据
                });
            }
        },
        searchData() {
            this.sexFliter = -1;  // 重置性别过滤器
            if (this.searchKey.length === 0) {
                this.showDatas = mock;  // 如果没有搜索内容，显示所有数据
            } else {
                this.showDatas = mock.filter((data) => {
                    return data.name.search(this.searchKey) !== -1;  // 搜索名字匹配的用户
                });
            }
        }
    },
    watch: {
        sexFliter(oldValue, newValue) {
            this.fliterData();  // 监听性别筛选变化，重新过滤数据
        },
        searchKey(oldValue, newValue) {
            this.searchData();  // 监听搜索关键词变化，重新搜索数据
        }
    }
})
App.mount("#Application")

🦋2.2 详细解析

数据定义：
- sexFliter: 用于保存性别筛选的值，初始值为 -1，表示不进行性别筛选。0 表示男性，1 表示女性。
- showDatas: 存储显示的数据，初始为空数组。后面通过过滤和搜索操作来修改它的内容。
- searchKey: 用于保存用户输入的搜索关键词，初始化为空字符串。
mounted 钩子：
- mounted() 是 Vue 3 的生命周期钩子，它会在组件挂载到 DOM 后立即执行。在这里模拟了一个请求过程，setTimeout 会延迟 3 秒后调用 queryAllData 方法，模拟从服务端获取数据。
methods 对象：
- queryAllData()：模拟从服务器请求数据，并将 mock 数据赋值给 showDatas。
- fliterData()：根据 sexFliter 过滤数据。
  - 如果 sexFliter 是 -1，表示显示所有数据。
  - 如果 sexFliter 是 0，则显示性别为男性的数据。
  - 如果 sexFliter 是 1，则显示性别为女性的数据。
- searchData()：根据 searchKey 搜索用户数据。
  - 如果 searchKey 为空，则显示所有数据。
  - 如果 searchKey 不为空，则根据用户输入的搜索内容（名字）过滤数据，使用 search() 方法检查名字中是否包含搜索关键词。
watch 对象：
- sexFliter 的变化监听：当性别筛选条件变化时，自动调用 fliterData() 方法进行数据过滤。
- searchKey 的变化监听：当搜索关键词变化时，自动调用 searchData() 方法进行数据搜索。
绑定和渲染：
- v-model="sexFliter"：双向绑定性别筛选的值，选中不同的单选框会更新 sexFliter 的值。
- v-model="searchKey"：双向绑定搜索框的值，输入框内容变化时会自动更新 searchKey。
- v-for="(data, index) in showDatas"：遍历 showDatas 数组，并在表格中显示每一项的数据。

🔎3. 逻辑总结

性别筛选：用户可以通过选择不同的单选框来过滤数据（全部、男、女）。当选择变化时，sexFliter 的值会更新，watch 会触发 fliterData() 方法，重新过滤数据。
搜索功能：用户可以输入名字进行搜索，当输入框内容变化时，searchKey 会被更新，watch 会触发 searchData() 方法，重新过滤数据。
数据模拟：在 mounted 生命周期钩子中，模拟了从服务器加载数据的过程，3 秒后数据会显示在页面上。之后的筛选和搜索操作都基于 mock 数据。

🔎4. 性能优化和扩展建议

模拟请求：当前的 setTimeout 模拟了一个 3 秒的请求过程，但在实际应用中可以通过 axios 或 fetch 等方法进行真实的异步请求。
搜索优化：当前的搜索方法使用 search() 查找子串，如果数据量较大时可以考虑引入更高效的搜索算法，比如使用索引或者全文搜索工具。
用户交互提示：可以添加一些用户交互提示，比如当没有搜索结果时显示“没有找到相关用户”或者加载时显示“正在加载…”的提示。

总的来说，这段代码展示了 Vue 3 的基本用法，包括 data、methods、watch 和 v-model 的双向绑定，适合用作基础的列表管理页面。

🚀二、组合式API用户列表

🔎1. HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组合式API用户列表</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .container {
            margin: 50px;
        }
        .content {
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="Application"></div>
    <script> ... </script>
</body>
</html>

页面结构：和上一个例子一样，包含一个容器 #Application，页面显示了性别过滤单选框、搜索框以及一个用户列表表格。
- 性别筛选：三个单选框，用于选择过滤“全部”、“男”或“女”。
- 搜索框：一个文本框，用于输入搜索关键词，用户可以按名字进行搜索。
- 用户列表表格：显示用户的姓名和性别。

🔎2. Vue 3 组合式 API

在 Vue 3 中，组合式 API 提供了更灵活的方式来组织组件的逻辑。与选项式 API 不同，组合式 API 使用 setup 函数来进行组件的初始化。

🦋2.1 数据和方法

let mock = [
    { name:"小王", sex:0 },
    { name:"小红", sex:1 },
    { name:"小李", sex:1 },
    { name:"小张", sex:0 }
]

const App = Vue.createApp({
    setup() {
        // 定义响应式数据
        const showDatas = Vue.ref([])  // 显示的数据，初始化为空数组

        // 查询数据的方法
        const queryAllData = () => {
            setTimeout(() => {
                showDatas.value = mock  // 模拟3秒后从服务器加载数据
            }, 3000);
        }

        // 组件挂载时请求数据
        Vue.onMounted(queryAllData)

        // 性别筛选和搜索的响应式变量
        let sexFliter = Vue.ref(-1)  // -1表示全部，0表示男性，1表示女性
        let searchKey = Vue.ref("")  // 搜索关键词

        // 根据性别筛选数据的方法
        let fliterData = () => {
            searchKey.value = ""  // 清空搜索框内容
            if (sexFliter.value == -1) {
                showDatas.value = mock  // 如果性别筛选为“全部”，显示所有数据
            } else {
                showDatas.value = mock.filter((data) => {
                    return data.sex == sexFliter.value  // 根据性别进行过滤
                })
            }
        }

        // 根据搜索关键词搜索数据的方法
        let searchData = () => {
            sexFliter.value = -1  // 重置性别筛选为“全部”
            if (searchKey.value.length == 0) {
                showDatas.value = mock  // 如果没有搜索关键词，显示所有数据
            } else {
                showDatas.value = mock.filter((data) => {
                    return data.name.search(searchKey.value) !== -1  // 查找名字中包含搜索关键词的用户
                })
            }
        }

        // 侦听 sexFliter 和 searchKey 的变化
        Vue.watch(sexFliter, fliterData)
        Vue.watch(searchKey, searchData)

        // 返回响应式数据和方法，这些会暴露给模板
        return { 
            showDatas, 
            searchKey, 
            sexFliter 
        }
    },

解析：

mock 数据：定义了一些模拟的用户数据，每个用户有姓名 (name) 和性别 (sex)。
setup() 函数：这是 Vue 3 组合式 API 的核心，负责定义组件的响应式数据、方法和生命周期钩子。
- showDatas：定义为响应式变量（通过 Vue.ref([])），用于存储显示的用户数据。
- queryAllData：模拟从服务器请求数据，3 秒后将 mock 数据赋值给 showDatas，以此模拟数据加载的延迟。
- sexFliter 和 searchKey：分别表示性别筛选和搜索框内容的响应式变量。
- fliterData：根据选择的性别过滤数据。如果性别选择是 -1（即全部），则显示所有数据；如果选择的是 0 或 1，则根据性别过滤数据。
- searchData：根据输入框的搜索关键词进行过滤。它会在用户输入时自动重置性别筛选并根据名字搜索用户。
onMounted 生命周期钩子：Vue.onMounted(queryAllData) 在组件挂载后调用 queryAllData 方法，模拟从服务器请求数据并更新 showDatas。
watch 侦听器：Vue.watch() 监听 sexFliter 和 searchKey 的变化，分别触发 fliterData 和 searchData 来更新显示的数据。

🦋2.2 模板部分

template: `
    <div class="container">
        <div class="content">
            <input type="radio" :value="-1" v-model="sexFliter"/>全部
            <input type="radio" :value="0" v-model="sexFliter"/>男
            <input type="radio" :value="1" v-model="sexFliter"/>女
        </div>
        <div class="content">搜索：<input type="text" v-model="searchKey" /></div>
        <div class="content">
            <table border="1" width="300px">
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                </tr>
                <tr v-for="(data, index) in showDatas">
                    <td>{{data.name}}</td>
                    <td>{{data.sex == 0 ? '男' : '女'}}</td>
                </tr>
            </table>
        </div>
    </div>
`

解析：

v-model="sexFliter"：绑定单选框和 sexFliter，当用户选择不同的性别时，sexFliter 的值会自动更新，从而触发相应的过滤操作。
v-model="searchKey"：绑定搜索框和 searchKey，当用户输入搜索内容时，searchKey 会更新，触发搜索操作。
v-for="(data, index) in showDatas"：遍历 showDatas 数组，动态生成表格中的每一行。每一行显示用户的姓名和性别。

🔎3. 代码总结

Vue 3 组合式 API 的使用：
- setup() 用于组织组件的状态和逻辑。
- 使用 Vue.ref() 定义响应式数据，这些数据会在模板中自动绑定和更新。
- Vue.onMounted() 生命周期钩子用于模拟数据请求。
- Vue.watch() 用来监听响应式数据的变化，从而触发相应的过滤和搜索操作。
功能实现：
- 用户可以选择不同的性别筛选选项来过滤用户列表。
- 用户可以在搜索框中输入名字来过滤显示的用户。
- 数据加载是模拟的，3 秒后显示用户数据。