v-if vs v-show vs v-for

v-if是“真正”的条件渲染，因为在切换过程中条件内的事件监听器和子组件的会被适当的销毁和重建
v-show 不管初始条件市什么，元素总是被渲染，并且知识简单的基于css进行切换

v-if有更高的切换开销，而v-show有更高的初始渲染开销。
总结：v-if ：用于条件很少改变的时候
v-show：用于频繁切换的时候
注意： v-show不支持<template>,v-if支持<template>
不推荐v-if，v-for一起使用，v-for具有比v-if更高的优先
v-if v-for 示例

//不推荐的使用
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

将会如下运算

//如果只想渲染出一部分元素，每次重渲染的时候也要遍历整个列表，不论users是否发生变化
this.users.map(function (user) {
  if (user.isActive) {
    return user.name
  }
})

//推荐使用计算属性
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}
//
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

这样使用的好处：

• 过滤后的列表只会在users数组发生变化时才被重新运算，过滤更高效
• 使用v-for =“user in activeUsers”之后，我们在渲染的时候只会遍历满足条件的用户，渲染更高效
• 解耦渲染层的逻辑，可维护性（对逻辑的更改和扩展）更强