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中,把它们放在一起,输出的
·
首先我们需要知道关于这个问题,其实在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
移动至容器元素上(比如ul
、ol
)或者外面包一层template
即可。
更多推荐
已为社区贡献4条内容
所有评论(0)