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

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

文章目录

🚀前言
🚀一、用户列表
- 🔎1. HTML 结构
- 🔎2. Vue 3 的 JavaScript 部分
- - 🦋2.1 数据与组件初始化
  - 🦋2.2 详细解析
- 🔎3. 逻辑总结
- 🔎4. 性能优化和扩展建议
🚀二、组合式API用户列表
- 🔎1. HTML 结构
- 🔎2. Vue 3 组合式 API
- - 🦋2.1 数据和方法
  - 🦋2.2 模板部分
- 🔎3. 代码总结
- 🔎4. 可能的优化和扩展

🚀前言

在现代 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 秒后显示用户数据。