V-for和v-if哪个优先级高？同时使用如何解决？

v-for优先级高 避免浪费性能  用div或template包裹，把v-if写在包裹标签上

不能同时使用  v-for的时候我们才开始渲染dom元素,这个v-if还⽆法进⾏判断.

首先：永远不要把 v-if 和 v-for 同时用在同一个元素上。

其次：当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级

将 users替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表

将：
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
 
 
换成：
 
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}
 

2.避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 。

将:
<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
 
更新为：
 
<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>