条件渲染

v-if

写法：

（1）v-if = " 表达式 "

（2）v-else-if = " 表达式 "

（3）v-else = "表达式"

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

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

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

v-show

写法：v-show= " 表达式 "

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

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

备注：使用v-if 时，元素可能无法获取到，而使用v-show一定可以获取到。（还是因为元素被移除）

v-if和v-show的比较

都是用来控制元素的显示、隐藏，区别就在于它们各是通过什么去控制元素的显示、隐藏

🐨操作方式

v-if：通过控制vue的虚拟dom树上的节点，来联动控制真实dom上的节点，从而控制元素的显示、隐藏。

v-show：通过css样式中的dispaly：none；控制元素显示、隐藏

🐷编译

v-if：有Dom的编译和卸载的过程，并且有惰性条件，为真的时候才开始布局

v-show：基于CSS

🐰性能和使用场景

v-if：有更高的切换消耗；适合运营条件不大可能改变，执行业务相对复杂

v-show：有更高的初始渲染消耗，适合频繁的切换

v-for指令

1.用于展示列表数据

2.语法 ：v-for ="（item ，index） in xxx " ：key=" yyy "

3.可变厉：数组，对象，字符串（用的很少），指定次数（用的很少）

key 这个特殊的 attribute 主要作为 Vue 的虚拟 DOM 算法提示，在比较新旧节点列表时用于识别 vnode。

在没有 key 的情况下，Vue 将使用一种最小化元素移动的算法，并尽可能地就地更新/复用相同类型的元素。如果传了 key，则将根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素。

意思就是写in-for遍历列表时候你没写key，vue会默认将遍历时候的索引值（index）作为key

图片中展示的是"老刘"往前面加会错位（用的是index作为key是得到索引值） ；新旧对比，不一样的就重新生成新的，一样的就继续用之前旧的（复用）

1.虚拟DOM中的key的作用：

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

👍比较规则如下：

2.对比规则：

（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：

1.如果虚拟DOM中内容没变，直接使用之前的真实DOM

2.如果虚拟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和v-if不建议用在一起

1.当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费（Vue2.x）

2.这种场景建议使用 computed，先对数据进行过滤

注意：3.x 版本中 v-if 总是优先于 v-for 生效。由于语法上存在歧义，建议避免在同一元素上同时使用两者。比起在模板层面管理相关逻辑，更好的办法是通过创建计算属性筛选出列表，并以此创建可见元素。