v-if 和v-show以及v-for便利添加key值

v-if 和v-show的区别

v-if 是真正的条件渲染，因为它会确保在切换的过程中条件块内的事件监听器和子组件适当的被销毁或重建

v-if 也是惰性的：如果在初始渲染时为假，那么它什么也不做，直到第一次变为真时，才会开始渲染条件块

v-show:操作的是元素的display属性（不占位）
v-if:操作的是元素的创建和插入

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

v-show:前台数据的展示
v-if:管理系统权限列表的展示

v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

（1）v-for 遍历必须为 item 添加 key
在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。

（2）v-for 遍历避免同时使用 v-if【永远不要把 v-if 和 v-for 同时用在同一个元素上。】
v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。