vue中v-if和v-for混用时应该注意的事项

v-if和v-for一般不建议一起使用，如果一定需要用到，最好使用一下两种方法进行替换。
1、当根据遍历的列表中的对象的某一个属性决定展示与否的时候，使用计算属性(computed)进行判断，computed的具体介绍详见：https://cn.vuejs.org/v2/guide/computed.html。

例子：遍历users，如果对象的isShow属性为true时候展示

users: [
        {'name': '111', 'isShow': true},
        {'name': '222', 'isShow': false},
        {'name': '333', 'isShow': false},
        {'name': '444', 'isShow': true}
      ]

改良前：因为v-for优先级比v-if高，所以在每次重新渲染的时候会先遍历整个列表，再进行if判断是否展示，即：每次都需要重新渲染全部列表对象再判断是否需要展示

<ul>
  <li v-for="user in users" v-if="user.isShow">
    {{ user.name }}
  </li>
</ul>

改良后：会先判定列表对象时候需要显示，之后渲染需要显示的对象，效率更高

// 渲染代码
<ul>
  <li v-for="user in showUsers" :key="user.id" >
    {{ user.name }}
  </li>
</ul>

// 计算属性代码
computed: {
    showUsers: function () {
      return this.users.filter(function (user) {
        return user.isShow
      })
    }
  }

2、根据某一个与待循环列表无关的属性决定是否展示渲染后的数组对象时，可以把v-if上移。

例子：根据isShow属性决定是否显示users列表

users: [
        {'name': '111'},
        {'name': '222'},
        {'name': '333'},
        {'name': '444'}
      ],
isShow: true

改良前：

<ul>
  <li v-for="user in users" v-if="isShow">
    {{ user.name }}
  </li>
</ul>

改良后：

<ul v-if="isShow">
  <li v-for="user in users">
    {{ user.name }}
  </li>
</ul>