一、v-if和v-show

v-if和v-show都是控制元素显示或者隐藏的命令，并且两者都通过赋予boolen值来进行控制。 由于v-show默认是false，因此如果不显示的话，我们优先使用v-if，因为v-if为false的时候并不会被创建，这样会节约性能。

	vi-if	v-show
应用场景	不频繁的切换	频繁的切换
切换原理	创建、销毁组件	控制display的属性

二、v-for和v-if不能一起使用

在Vue中，V-for的优先级比v-if要高，因此，浏览器在执行的过程中，会优先执行V-for，将所有的数据全部都渲染出来，然后再通过v-if来计算，并将不需要的数据销毁，这样会浪费计算机的性能。因此，我们应避免这样的书写。解决方法大致分为2类：

1、当v-if的条件与v-for相关时

例如，我们在 li 标签中通过v-for来对数组 [1、2、3、4] 进行渲染，并且我们在 li 标签中使用 v-if 来控制只渲染数组中偶数的数据。此时计算机会首先渲染出4个标签，然后再销毁2个标签，比较浪费性能。对于这样的情况，我们认为 v-if 的条件与 v-for 相关，可以通过computed方法来对 v-for 的数据进行筛选，返回新的数据，从而实现 v-if 的效果。

优化前：

<template>
  <div>
    <li v-fo='item in list' v-if =' item % 2 === 0' ></li>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list : [1,2,3,4]
    }
  }
}
</script>

优化后：

<template>
  <div>
    <li v-for='item in newList'></li>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list : [1,2,3,4]
    }
  }，
  computed:{
    newList(){
      return this.list.filter( item => item % 2 === 0 )
    }
  }
}
</script>

2、当v-if的条件与v-for无关时

例如，还是上面的例子。我们在 li 标签中通过v-for来对数组 [1、2、3、4] 进行渲染，并且我们在 li 标签中使用 v-if 来控制只渲染数组中偶数的数据，但，此时我们再定义一个布尔型的变量 flag 来控制标签的显示与否。那么，计算机会首先渲染出4个标签，然后再销毁4个标签（如果 flag 为 false），更加浪费性能。对于这样的情况，我们认为 v-if 的条件与 v-for 无关，可以通过在 li 标签外面包裹一个 template 标签，在 template 标签中设置 v-if 来实现相同的效果。这样做，在 flag 为 false 的时候，就不会再触发 v-for 来循环 li 标签。

优化前：

<template>
  <div>
     <li v-for='item in list' v-if= 'flag' ></li>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list : [1,2,3,4] ,
      flag : false ,
    }
  }，
}
</script>

优化后：

<template>
  <div>
    <template v-if= ' flag ' >
      <li v-for='item in list'></li>
    </template>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list : [1,2,3,4] ,
      flag : false ,
    }
  }，
}
</script>