当前位置：首页 > news >正文

Vue基础知识-使用监视属性watch和计算属性computed实现列表过滤+排序

news 2025/9/2 19:20:42

一、完整源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script>
</head>
<body><div id="root">监视属性实现按名模糊搜索：<input type="text" v-model="keyword" /></br></br><table border="1px solid black"><tr><td>id</td><td>姓名</td><td>年龄</td></tr><tr v-for = 'person in filterPersons' :key="person.id"><td>{{person.id}}</td><td>{{person.name}}</td><td>{{person.age}}</td></tr></table><hr>计算属性实现按名模糊搜索：<input type="text" v-model="keyword2" /><input type="button"  @click="sortType = 1" value="年龄升序"/><input type="button" @click="sortType = 2" value="年龄降序"/></br></br><table border="1px solid black"><tr><td>id</td><td>姓名</td><td>年龄</td></tr><tr v-for = 'person in filterPersons2' :key="person.id"><td>{{person.id}}</td><td>{{person.name}}</td><td>{{person.age}}</td></tr></table></div>
</body><script>const vm = new Vue({el:'#root',data() {return {persons:[{id:1,name:'张三',age:19},{id:2,name:'李四',age:15},{id:3,name:'王五',age:16},{id:4,name:'张三2',age:17}],filterPersons:[],keyword:'',keyword2:'',sortType:0}},watch:{keyword:{immediate:true, //立即执行监视handler(val){//filter将返回一个新的数组；'abc'.indexOf('')的返回值为0this.filterPersons = this.persons.filter((person)=>{return person.name.indexOf(val) !== -1   //包含val则保留该person})}},},//filterPersons2 何时调get？ 1 上来就调用 2 依赖的keyword2，sortType变化就调用computed:{filterPersons2(){const arr =  this.persons.filter((person)=>{return person.name.indexOf(this.keyword2) !== -1  })if(this.sortType){arr.sort((person1,person2)=>{return this.sortType == 2 ?person2.age - person1.age:person1.age - person2.age})}return arr}}})</script>
</html>

二、核心知识点解析

1. 功能模块拆解

页面分为两个独立模块，对比展示watch与computed的差异：

模块	核心技术	功能	依赖数据
上方表格	watch	仅姓名模糊搜索	keyword
下方表格	computed	姓名模糊搜索 + 年龄升 / 降序排序	keyword2、sortType

2. 监视属性（watch）详解

2.1 为什么需要`immediate: true`？

Vue 的watch默认仅在监听的数据（如 keyword）发生变化时才触发 handler，初始化时（页面加载时）不会执行。
若不加immediate: true，页面打开时filterPersons为空，表格会显示空白；加上后，初始化时会主动执行一次 handler，加载所有人员数据。

2.2 `filter`与`indexOf`的核心逻辑

Array.prototype.filter()：遍历数组，返回一个新数组，包含所有满足 “回调函数返回 true” 的元素（不修改原数组）。
String.prototype.indexOf(val)：返回val在字符串中首次出现的索引，若不存在则返回-1。
关键细节：'abc'.indexOf('')返回0，因此当搜索框为空（keyword=''）时，person.name.indexOf('') !== -1恒成立，表格会显示所有数据。

3. 计算属性（computed）详解

3.1 computed 的核心特性：依赖缓存

computed的属性（如filterPersons2）会缓存计算结果，只有当它依赖的数据（keyword2、sortType）发生变化时，才会重新执行getter（即函数体）；若依赖数据不变，多次访问filterPersons2会直接返回缓存值，避免重复计算，效率高于methods。

3.2 排序逻辑解析

filteredArr.sort((p1, p2) => {return this.sortType === 2 ? p2.age - p1.age : p1.age - p2.age
})

sort方法的回调函数返回值规则：
- 返回正数：p1 排在 p2 后面（升序）；
- 返回负数：p1 排在 p2 前面（降序）；
- 返回 0：顺序不变。
此处通过sortType控制排序方向：
- sortType=1：升序 → p1.age - p2.age（如 15-16=-1，15 排在 16 前）；
- sortType=2：降序 → p2.age - p1.age（如 16-15=1，16 排在 15 前）。

三、运行效果与注意事项

1. 运行效果

页面加载时，两个表格均显示所有 4 条人员数据；
上方搜索框输入 “张”，仅显示 “张三” 和 “张三 2”；
下方搜索框输入 “张”，再点击 “年龄降序”，表格按 “19（张三）→17（张三 2）” 排序；
点击 “年龄升序”，下方表格按 “17（张三 2）→19（张三）” 排序。

2. 注意事项

Vue 版本：本文使用Vue2（代码中new Vue({el: '#root'})为 Vue2 语法），若使用 Vue3，需调整为createApp语法；
数组方法影响：sort方法会修改原数组，本文中filteredArr是filter返回的新数组，修改它不会影响原始persons数据，避免数据污染；
兼容性：indexOf在所有现代浏览器中支持，若需兼容更老浏览器，可替换为includes（如person.name.includes(val)）。