Vue中的列表渲染

v-for指令

        1.用于展示列表数据

        2.语法：v-for="(item,index) in xxx":key="yyy"

        3.可遍历：数组、对象、字符串(用的很少)、指定次数(用的很少)

面试题： react、vue中的key有什么作用?(key的内部原理)

        1.虚拟DOM中key的作用：

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

        2.对比规则：

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

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

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

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

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

        3.用index作为key可能会引发的问题：

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

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

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

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

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

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

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

 

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的根数据对象添加属性!!

 

 

<!-- 准备好一个容器 -->
    <div id="root">
        <h1>学生信息</h1>

        <button @click="student.age ++">年龄+1岁</button>
        <button @click="addSex">添加性别属性，默认值：男</button>
        <button @click="student.sex = '未知'">修改性别</button>
        <button @click="addFirstFriend">在列表首位添加一个朋友</button>
        <button @click="changeFirstFriendName">修改第一个朋友的名字为：张三</button>
        <button @click="addHobby">添加一个爱好</button>
        <button @click="changeFirstHobby">修改第一个爱好为：开车</button>
        <button @click="removeSmoke">过滤掉第一个爱好为：抽烟</button>

        <h3>姓名：{{student.name}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        <h3>爱好：</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友们</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}-{{f.age}}
            </li>
        </ul>

    </div>

<script>
    Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
        data:{
            student:{
                name:'kuromi',
                age:18,
                hobby:['抽烟','喝酒','烫头'],
                friends:[
                    {name:'jerry',age:55},
                    {name:'pocky',age:23}
                ]
            }
        },
        methods: {
            addSex(){
                // Vue.set(this.student,'sex','男');
                this.$set(this.student,'sex','男');
            },
            addFirstFriend(){
                this.student.friends.unshift({name:'huahua',age:23})
            },
            changeFirstFriendName(){
                this.student.friends[0].name = '张三';
            },
            addHobby(){
                this.student.hobby.push('看书');
            },
            changeFirstHobby(){
                // this.student.hobby[0] = '开车';
                //不可以！！！！通过数组的索引值去赋值

                // this.student.hobby.splice(0,1,'开车');
                // Vue.set(this.student.hobby,0,'开车');
                this.$set(this.student.hobby,0,'开车');
            },
            removeSmoke(){
                this.student.hobby = this.student.hobby.filter((h)=>{
                    return h !== '抽烟';
                })
            }
        },

    })
</script>