VUE学习个人纪录07（列表渲染）

列表渲染

v-for指令:
1.用于展示列表数据
2.语法:v-for="(item,index) in xxx" : key="yyy"（key唯一）
3.可遍历:数组、对象、字符串（用的很少）、指定次数（用的很少)

数据部分：

        personList: [{
                id: '001',
                name: 'aaa',
                age: "45"
            }, {
                id: '002',
                name: 'bbb',
                age: "15"
            }, {
                id: '003',
                name: 'ccc',
                age: "43"
            }],

            car: {
                name: "car1",
                price: "40w",
                color: "red"
            },

            str: 'hello world'

HTML部分

      <ul>
            <!-- 遍历数组 使用较多 -->
            <h2>人员列表</h2>
            <li v-for="person in personList" :key="person.id">
                {{person.name}}-{{person.age}}
            </li>
        </ul>
        <ul>
            <!-- 遍历对象 使用较多 -->
            <h2>carList</h2>
            <li v-for="(value,k) of car" :key="k">
                {{k}}---{{value}}
            </li>
        </ul>
        <!-- 遍历字符串 -->
        <h2>测试遍历字符串</h2>
        <ul>
            <li v-for="(a,b) of str">
                {{a}}---{{b}}
            </li>
        </ul>
        <!-- 遍历指定次数 -->
        <ul>
            <h2>遍历指定次数</h2>
            <li v-for="(number,index) of 5" :key="index">
                {{number}}---{{index}}
            </li>
        </ul>

 

Key的作用和原理

1.虚拟DOM中key的作用:　

　key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较

比较规则如下:

2.对比规则:

　(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:

　　　　①.若虚拟DOM中内容没变,直接使用之前的真实DOM!

　　　　②.若虚拟DOM中内容变了，则生成新的真实DOM,随后替换掉页面中之前的真实DOM

　　(2).旧虚拟DOM中未找到与新虚拟DOM相同的key

　　　　创建新的真实DOM,随后渲染到到页面。

3．用index作为key可能会引发的问题:

　　1.若对数据进行:逆序添加、逆序删除等破坏顺序操作:

　　　　会产生没有必要的真实DOM更新　　==〉界面效果没问题，但效率低。

　　2.如果结构中还包含输入类的DOM:

　　　　会产生错误DOM更新==>界面有问题。

4.开发中如何选择key? :

　　1.最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。

　　2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

 

列表过滤

过滤时可以选用watch和computed方法实现

1.用watch实现

  watch: {
            immediate: true,
            handler(val) {

                this.personList = personList.filters((person) => {
                    return person.name.indexOf(val) !== -1
                })
            }
        }

注意：

  immediate: true,

　　是为了将函数先调用一次，否则在第一次打开页面时列表将不会展示出来；在没有插入立即执行语句时，需要先在输入框内输入关键词检索后，清除输入框内的内容，使输入框内变成空字符串，才能将列表内容展示出来 。

2.用computed实现

   computed: {
            filPerson() {
                return this.personList.filters((person) => {
                    return person.name.indexOf(this.keyWord) !== -1
                })
            }
        }

相较于监视方法实现功能，通过计算属性来实现功能较为简便，所以一般采用计算方法实现功能。

列表排序

通过过滤，可以使列表内容按需求排列，在计算方法的基础上进行修改，使得该过滤方法实现目的

 computed: {
            filPersons() {
                const arr = this.personList.filter((person) => {
                    return person.name.indexOf(this.keyWord) !== -1
                })
                if (this.sortType) {
                    arr.sort((person1, person2) => {
                        return this.sortType === 1 ? person2.age - person1.age : person1.age - person2.age
                    })
                }
                return arr
            }
        }

 数据监测

vue监视数据的原理:
1. vue会监视data中所有层次的数据。
2. 如何监测对象中的数据?
　　通过setter实现监视,且要在new Vue时就传入要监测的数据。

　　 (1).对象中后追加的属性,Vue默认不做响应式处理
　　 (2).如需给后添加的属性做响应式，请使用如下API:
　　　　Vue.set(target.propertyName/index.value）

　　　　vm.$set(target.propertyName/index,value)

3.如何监测数组中的数据?
　　通过包裹数组更新元素的方法实现,本质就是做了两件事:

　　　　(1).调用原生对应的方法对数组进行更新。
　　　　(2).重新解析模板,进而更新页面。

4.在Vue修改数组中的某个元素一定要用如下方法:
　　1. 使用这些API: push()、pop()、shift()、unshift()、splice()、sort()、reverse()

　　2. vue.set() 或vm.$set()

特别注意: Vue.set(）和 vm.$set() 不能给 vm 或 vm的根数据对象 添加属性!!!