Vue——v-if和v-for哪个优先级更高?

首先我们需要知道关于这个问题,其实在vue2和vue3中的答案是截然相反的。

实践中不应该把v-for和v-if放在一起

先说结论:

  • 在vue2中,v-for的优先级高于v-if
  • 在vue3中,v-if的优先级高于v-for

通常有两种情况下导致我们这样做:

1.为了过滤列表中的项目,比如:

v-for="user in users" v-if="user.isActive"
  • 在vue2中,把它们放在一起,输出的渲染函数中可以看出会先执行循环再判断条件,哪怕我们只渲染列表中一小部分元素,也得在每次重渲染的时候遍历整个列表,这会比较浪费
  • 在vue3中,v-if的优先级高于v-fo,所以v-if执行时,它调用的变量还不存在,就会导致异常

此时定义一个计算属性(比如 activeUsers),让其返回过滤后的列表即可(比如users.filter(u=>u.isActive))。

2.为了避免渲染本应该被隐藏的列表

v-for="user in users" v-if="shouldShowUsers"
  • 同样,在vue2中,把它们放在一起,输出的渲染函数中可以看出会先执行循环再判断条件,哪怕我们只渲染列表中一小部分元素,也得在每次重渲染的时候遍历整个列表,这会比较浪费
  • 在vue3中,这样写虽然并不会报错,但是官方还是及其不推荐外面这样去做

此时把v-if移动至容器元素上(比如ulol)或者外面包一层template即可。

你可能感兴趣的:(Vue,前端,vue.js,vue)