6、v-if

 

 

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

 

不推荐同时使用 v-if 和 v-for

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

v-for 比 v-if 优先级高，所以使用的话，每次 v-for 都会执行 v-if , 造成不必要的计算，影响性能，尤其是当之需要渲染很小一部分的时候。

<ul>
    <li v-for="user in users" v-if="user.isActive" :key="user.id">
      {{ user.name }}
    </li>
  </ul>

如上述情况，即使有100个user中只有一个需要使用v-if，也需要整个循环数组，这在性能上是极大的浪费。

那难道就没有更好的解决办法，回答：当然是有解决方法的；我们可以使用computed

示例：

<div>
    <div v-for="(user,index) in activeUsers" :key="user.index" >
        {{ user.name }} 
    </div>
</div>
data () {  // 业务逻辑里面定义的数据
    return {
      users,: [{
        name: '111111',
        isShow: true
      }, {
        name: '22222',
        isShow: false
      }]
    }
  }
computed: {
    activeUsers: function () {
        return this.users.filter(function (user) {
            return user.isShow;//返回isShow=true的项，添加到activeUsers数组
        })
    }
}