v-if ， v-show 和v-for

1.v-if：

按条件渲染，即只有在条件为true时，条件区块内的监听和子组件才会渲染建立，条件的切换就是监听和子组件的销毁和重建，如何条件切换过于频繁，耗费性能较大

2.v-show：

按条件显示，即不管条件是什么，初始化时都会渲染，不过，只有在条件为true时，才会显示出来，相当与操作dom的display属性切换。

3.v-for：

循环并通过 key 管理状态
（1）写法

// 一般写法
<li v-for="{ message } in items">
  {{ message }}
</li>

<!-- 有 index 索引时 -->
<li v-for="({ message }, index) in items">
  {{ message }} {{ index }}
</li>

// of 作为分隔符来替代 in
<div v-for="item of items"></div>

// 遍历对象：key--对象属性名 ，value--对象属性值，index--索引，
const myObject: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
    
<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

（2）key的作用主要就是为了高效的更新虚拟DOM，使用key值，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。
具体的key值理解点击下面链接：
key值详解
（3）v-if 和 v-for 组合
有时候我会遇见循环和判断出现在一行上，这样会导致异常。主要是v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：

//这会抛出一个错误，因为属性 todo 此时没有在该实例上定义
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

// 两种方法解决：
1.包裹一层<template>
<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>
2.通过迭代计算属性来解决
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

computed: {
  activeUsers() {
    return this.users.filter(user => user.isActive)
  }
}

总结：
1.v-if有更高的切换渲染开销，v-show有更高的初始化渲染开销。
2.v-if 和 v-for 一起用时，v-if 优先级更高。
3.v-for 加key值可以高效的更新虚拟DOM。