18_Vue列表排序

列表排序

需求分析

针对上个案例，列表过滤，我们对其进行一个升级
添加三个按钮，按照年龄进行升序，降序，原顺序
上个案例参考链接
根据上个案例，我们这次采用计算属性的方式进行实现

实现

逐步分析

html

首先我们需要构建下页面元素嘛
这个页面是由一个输入框input，3个按钮，一个ul li标签组合
button按钮组就中间的内容不一样，我们可以在data当中设置一个简单的数组，通过v-for渲染这三个按钮
接下来，给三个按钮设置一个点击事件 click，这个点击事件我们就设置一个简单的js表达式，让data当中的默认索引值发生变化就行
随后就是渲染 ul - li 了，渲染值是计算属性 filterPersons

    <!-- 创建一个容器 -->
    <div class="app">
        <!-- 模糊查询 -->
        <input type="text" v-model="keyWords">
        <!-- 按钮组 -->
        <button v-for="(item,index) in btnNames" @click="sortType = index">{{item}}</button>
        <!-- 列表渲染 -->
        <ul>
            <li v-for="item in filterPersons" :key="item.id">
                {{item.name}} - {{item.age}} - {{item.sex}}
            </li>
        </ul>
    </div>

data

      data: {
        btnNames:["年龄升序","年龄降序","原始顺序"],
        sortType: 2, // 原始排列索引值
        keyWords: "",
        persons: [ // 原始数据，不可更改
            {id: 1,name: '马冬梅',age: 38,sex: "女"},
            {id: 2,name: "周冬雨",age: 36,sex: "女"},
            {id: 3,name: "周杰伦",age: 39,sex: "男"},
            {id: 4,name: "温兆伦",age: 41,sex: "男"},
        ],
        
      },

sort

是给数组排序的一个api，这个api可以根据需求进行数组的逆序顺序各项排序

参考链接

计算属性

计算属性的目的是进行 依赖属性的计算，但也不仅仅是这样的，它还可以检测到依赖数据的变化进行更新
在computed当中有两个比较重要的配置项
- get：常用，很重要
  1. 当 计算属性 在页面当中被访问的时候，get方法被调用；
  2. 当计算属性所依赖的属性发生修改 get方法被调用
  3. get方法需要一个返回值，这个返回值代表新的计算属性
- set：用得少，但很重要
  - 当计算属性，自身发生修改的时候，被调用
  - 被调用的时候，需要将依赖属性的值同步修改
观察我们这个案例，我们需要直接对 计算属性 进行修改吗？不需要
计算属性什么时候修改？ input输入的时候，button按钮点击的时候
那么我们只需要配置计算属性的get配置项即可
get配置项需要返回值，这个不着急，但是不能像之前那样直接返回模糊查询结果了，我们还需要进行排序

const vm = new Vue({
      el: '.app',
      data: {
        name: 'wavesbright',
        btnNames:["年龄升序","年龄降序","原始顺序"],
        sortType: 2, // 原始排列索引值
        keyWords: "",
        persons: [ // 原始数据，不可更改
            {id: 1,name: '马冬梅',age: 38,sex: "女"},
            {id: 2,name: "周冬雨",age: 36,sex: "女"},
            {id: 3,name: "周杰伦",age: 39,sex: "男"},
            {id: 4,name: "温兆伦",age: 41,sex: "男"},
        ],
        
      },
      methods: {
        
      },
      computed:{ // 计算属性配置项
        filterPersons(){
            // 对输入内容进行模糊查询
            let arr = this.persons.filter(item=>{
                // 内部的判定条件是，键盘输入的关键字，在item的name属性当中，是否有索引值，是否存在
                return item.name.indexOf(this.keyWords) != -1;
            })

            // 判断是否需要排序
            if(this.sortType != 2){
                // a是前一项（index = 0）；b是后一项（index = 1）
                // a-b代表顺序，b-a代表逆序
                // a和b都是数组当中的循环项，也就是该数组当中的对象
                arr.sort((a,b)=>{
                    // 我们这里的a与b都是对象，我们需要根据它们的age进行排序
                    return this.sortType === 0? a.age - b.age : b.age - a.age
                })
            }
            
            // 将arr返回，filterPersons的值确定了
            return arr;
        }
      }
    });

步骤解析

核心内容就是这一块区域，我们一步一步来

首先我们需要搞清楚一点，filterPersons依赖的数据是谁？（keyWords和sortType）

首先，get第一次调用的时候，是页面DOM元素加载完毕的时候调用
- 这个时候，会对 原始数组 persons 进行一个过滤
- 过滤的条件是 input输入的内容keyWords
- 刚加载完毕的时候，keyWords是没有输入信息的，也就是input输入的内容是一个空串
- 空串在字符串 item.name 当中是必然存在的，所以第一次过滤，实际就是将整个 persons当中的内容，存放在了变量 arr当中
- 接下来开始判断是否需要排序，由于刚加载，sortType的值是 2，所以不会进行排序，当前页面是 原始排序状态
首先我们来熟悉下流程，当页面启动的时候，计算属性的get方法会被调用
接下来我们对输入框的内容进行输入，我们来观察下 vue当中 filterPersons的变化
- 但是控制台当中并没有输出排序语句
那现在，我们清空控制台，点击排序
这个控制流程就很清晰了