v-if(条件渲染)、v-for(列表渲染)、key的工作原理

一、条件渲染

          1、v-if 

                写法：

                    (1)、v-if=“表达式”

                    (2)、v-else-if="表达式"

                    (3)、v-else=“表达式”

                适用于：切换频率较低的场景

                特点：不展示的DOM元素直接被移除

                注意：v-if可以和：v-else-if、v-else一起使用，但要求结构不能被打断

          2、v-show

                写法：v-show=“表达式”

                适用于：切换频率较高的场景

                特点：没有展示的DOM元素没有被移除，仅仅是使用样式隐藏掉。

          3、备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取

条件渲染例子

二、列表渲染

v-for指令

            1、用于展示列表数据

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

            3、可遍历：数组、对象、字符串（用得少）、指定次数（用的很少）

列表渲染例子

三、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是没有任何问题的。

（这部分内容有些抽象 总之一句话 在使用v-for进行列表渲染时，一定要用:key="xxx" 做唯一标识，且如果使用index做为唯一标识在有些特殊情况下 会有问题！如果没有添加key值控制台不会报错 但是后面编程中会遇到各种各样难以理解的问题！）