vue-java-tutorials/vue2-tutorials/import-script/11-列表过滤.md

Vue2 列表过滤与排序综合文档

一、功能概述

本示例展示了 Vue2 中如何实现列表的实时过滤与动态排序功能，结合计算属性实现了高效的数据处理。

二、代码实现解析

<div id="app">
    <h1>列表过滤</h1>
    <!-- 搜索框 -->
    <input type="text" v-model="keyword">
    <!-- 排序按钮 -->
    <button @click="sortType = 2">年龄升序</button>
    <button @click="sortType = 1">年龄降序</button>
    <button @click="sortType = 0">重置</button>

    <!-- 结果列表 -->
    <ul>
        <li v-for="(item,index) in filterPersion" :key="item.id">
            {{item.name}}---{{item.age}}---{{item.sex}}
        </li>
    </ul>
</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            sortType: 0,  // 0-默认 1-降序 2-升序
            keyword: "",  // 搜索关键词
            list: [
                { id: "001", name: "Bunny-001", age: 19, sex: "男" },
                { id: "002", name: "Bunny-002", age: 16, sex: "男" },
                // ...其他数据
            ]
        },
        computed: {
            filterPersion() {
                // 1. 过滤
                let newList = this.list.filter(person => 
                    person.name.includes(this.keyword)
                );
                
                // 2. 排序
                if (this.sortType !== 0) {
                    newList.sort((a, b) => 
                        this.sortType === 2 ? a.age - b.age : b.age - a.age
                    );
                }
                
                return newList;
            }
        }
    });
</script>

三、核心机制详解

1. 数据流设计

原始数据 (list)
   ↓ 
[过滤] → 根据 keyword 筛选
   ↓
[排序] → 根据 sortType 排序 (可选)
   ↓
渲染列表 (filterPersion)

2. 计算属性优势

• 自动缓存：依赖项未变化时不重新计算
• 响应式：keyword 或 sortType 变化自动更新
• 声明式：模板保持简洁，逻辑集中管理

3. 排序算法优化

// 三元运算符实现升降序切换
(a, b) => this.sortType === 2 ? a.age - b.age : b.age - a.age

四、最佳实践建议

1. 性能优化

• 避免深拷贝：直接操作过滤后的数组
• 防抖处理：搜索框添加防抖（使用 lodash.debounce）
• 分页加载：大数据集应配合分页

2. 代码改进

// 更安全的字符串包含检查
person.name.toLowerCase().includes(this.keyword.toLowerCase())

// 可配置的排序函数
const sortStrategies = {
  1: (a, b) => b.age - a.age,
  2: (a, b) => a.age - b.age
};
newList.sort(sortStrategies[this.sortType]);

3. Key 的使用

<!-- 使用唯一id而非index作为key -->
<li v-for="item in filterPersion" :key="item.id">

五、扩展功能实现

1. 多条件过滤

filterPersion() {
    return this.list.filter(person => {
        const nameMatch = person.name.includes(this.keyword);
        const ageMatch = this.filterAge === '' || person.age == this.filterAge;
        return nameMatch && ageMatch;
    });
}

2. 多列排序

data() {
    return {
        sortConfig: { field: 'age', order: 1 } // 1升序，-1降序
    }
},
computed: {
    sortedList() {
        return [...this.filteredList].sort((a, b) => {
            return a[this.sortConfig.field] > b[this.sortConfig.field] 
                   ? this.sortConfig.order : -this.sortConfig.order;
        });
    }
}

3. 异步数据加载

async loadData() {
    this.list = await fetch('/api/persons').then(res => res.json());
}

六、常见问题解决方案

1. 列表不更新问题

   • 确保使用变异方法修改原始数组
   • 或使用 Vue.set 更新数组元素

2. 排序状态保持

   created() {
       this.sortType = Number(localStorage.getItem('sortType')) || 0;
   },
   watch: {
       sortType(newVal) {
           localStorage.setItem('sortType', newVal);
       }
   }
   

3. 空搜索结果处理

   <div v-if="filterPersion.length === 0">暂无匹配结果</div>