Vue之列表排序--computed与watch两种方法比较

<div id="root">
		<h1>使用计算属性</h1>
        <ul>
            <input type="text" placeholder="输入关键字进行筛选" v-model="keyWord">
            <button @click="sortType=2">年龄升序</button>
            <button @click="sortType=1">年龄降序</button>
            <button @click="sortType=0">原顺序</button> 
            <li v-for="(p) in filterPersons" :key="p.id">
                {{p.name}}-{{p.age}}--{{p.gender}}
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm =  new Vue({
            el:'#root',
            data:{
                keyWord:"",
                sortType:0,
                persons:[
                    {id:"001",name:"周杰伦",age:14,gender:"男"},
                    {id:"002",name:"周冬雨",age:15,gender:"女"},
                    {id:"003",name:"温兆伦",age:22,gender:"男"},
                    {id:"004",name:"马冬梅",age:19,gender:"女"},
                ],
                
            },
            computed:{
                filterPersons(){
                    const arr = this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) !== -1;
                    })
                    if(this.sortType){
                        arr.sort((p1,p2)=>{
                            return this.sortType ===1?p2.age-p1.age : p1.age-p2.age;
                        })
                    }
                    //注意计算属性是需要返回值的
                    return arr;
                }
            }
        })
    </script>

在上个例子的前提下，新增按年龄来排序的功能。
第一个方法是computed方法，对data里的persons数组进行一堆操作，将结果返回到filterPersons这个数组，也就是说，只需要维护好这个新数组，那么就能渲染出我们所要的效果。
三个button按钮，分别单击可以改变sortType变量值，我们可以根据其变量决定降序或者顺序。在computed里面声明了arr数组用来接收新数组，this.persons.filter用了数组的过滤方法，我们将一个可以过滤的函数塞进去作为参数，这个函数可以简写为()=> 。这个箭头函数也需要一个参数，我们传入p，表示的是persons数组中的一个对象。通过indexOf方式判断，输入的东西在我们的数组中有没有，如果没有就返回-1，如果有，就拿到它。这个时候已经完成了数组过滤，代码判断this.sortType值是否为0 ，如果值不为0 ，则进行排序。我们用到了arr.sort()方法，参数是一个可以排序的函数，将这个函数简写为箭头函数。这个箭头函数需要两个参数（数组的前一个值与后一个值），如果需要升序排列，则返回 a-b。如果需要降序排列，返回b-a。

<div id="root">
		<h1>使用watch监视属性</h1>
        <ul>
            <input type="text" placeholder="输入关键字进行筛选" v-model="keyWord">
            <button @click="sortType=2">年龄升序</button>
            <button @click="sortType=1">年龄降序</button>
            <button @click="sortType=0">原顺序</button> 
            <li v-for="(p) in filterPersons" :key="p.id">
                {{p.name}}-{{p.age}}--{{p.gender}}
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm =  new Vue({
            el:'#root',
            data:{
                keyWord:"",
                sortType:0,
                persons:[
                    {id:"001",name:"周杰伦",age:14,gender:"男"},
                    {id:"002",name:"周冬雨",age:15,gender:"女"},
                    {id:"003",name:"温兆伦",age:22,gender:"男"},
                    {id:"004",name:"马冬梅",age:19,gender:"女"},
                ],
                //注意一定要有这个新数组
                filterPersons:[],
            },
            watch:{
                keyWord:{
                    immediate:true,
                    handler(newVal){
                        var arr = this.persons.filter((p)=>{
                            return p.name.indexOf(newVal) !== -1;
                        })
                        if(this.sortType){
                            arr.sort((p1,p2)=>{
                                return this.sortType === 1 ? p2.age - p1.age : p1.age-p2.age ;
                            })
                        }
                        this.filterPersons = arr;
                        for(var i in arr){
                            console.log(arr[i].age)
                        }
                    }
                }
            },   
        })
    </script>

需要注意的是，watch监视属性来实现，会出现bug。你需要先点击排序方式按钮，然后输入一个字符（空格也行），再删除掉这个字符，才能触发排序。对用户体验极不友好！！！！我就是踩了这个坑~
效果如下：