Vue-列表渲染（key作用与原理)

初步开始学习Vue2
已经了解过了模板语法、数据绑定、事件处理、计算属性、监视属性的基本操作

---

**列表渲染**
这里分享的是创建基本列表、列表过滤、列表排序

    <div class="box">
        <h2>人员列表</h2>
        <ul>
            <li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li>
        </ul>
    </div>

    const vm = new Vue({
        el:'.box',
        data:{
            persons:[
                {id:'001', name:'张三', age:18},
                {id:'002', name:'李四', age:19},
                {id:'003', name:'王五', age:20}
            ]
        }
    })

以上是创建基本列表的代码片段，这里要着重讲一讲key的作用与原理，在v-for中key是很重要的。
key作用与原理

这里引用一张解释图片，在遍历列表时，Vue先根据初始数据生成虚拟DOM，然后将虚拟DOM转为真实DOM，接着我们在页面上的真实DOM进行操作（比如在表单中填写），当我们在列表中加入一个新数据时（假设是加在最前面：利用数组的unshift操作），Vue又会根据新数据生成虚拟DOM，然后就是通过Vue的虚拟DOM对比算法来比较初始和新的虚拟DOM，不同的数据就用新的，相同的就用初始的，而我们在页面上真实DOM进行的操作也被作为初始的保留下来，从而导致右侧的结果。这是将index作为key造成的结果。当我们将id作为key时，虚拟DOM对比算法会根据id来比较，就不会出现上述问题。
列表过滤
实现列表过滤的思路是：获取在表单中输入的值，然后通过在Vue中操作，watch方法：监视keyword，利用数组的过滤操作，但是要注意，不能将原数组更改，否则过滤会逐渐将列表删完，所以要在data中创建一个新的空数组filPersons;computed方法：与watch中数据处理类似，但是相对简洁。
以下分别使用watch和computed来实现过滤

watch:{
            keyword:{
                immediate:true,
                handler(val){
                    this.filPersons = this.persons.filter((p)=>{
                        return p.name.indexOf(val) !== -1
                    })
                }
            }
        }

computed:{
            filPersons(){
                return this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyword) !== -1
                })
            }
        }

列表排序 分别设置三个按钮用于：升序，降序，原顺序，注意:排序是在过滤的基础上排的。主要是使用数组的sort方法。实现比较简单，在html和计算属性中分别添加以下代码。

    <button @click="sortType = 2">年龄升序</button>
    <button @click="sortType = 1">年龄降序</button>
    <button @click="sortType = 0">原顺序</button>

    //判断一下是否需要排序
    if(this.sortType){
        arr.sort((p1,p2)=>{
            return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
        })
    }