v-for和v-if优先级

最新推荐文章于 2025-09-05 21:49:48 发布

原创最新推荐文章于 2025-09-05 21:49:48 发布 · 890 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

29 篇文章

订阅专栏

本文通过源码分析，探讨了v-for优先于v-if解析的原因，并强调了同时使用可能导致的性能浪费。提供了外层模板嵌套和计算属性过滤的解决方案，以优化Vue中循环和条件判断的结合方式。

结论

1.v-for 优先于 v-if被解析（源码角度分析）

2.如果同时出现，每次渲染都会先执行循环在判断条件，无论如何循环都不可以避免，浪费了性能

3.避免这个情况，外层嵌套template，在这一层进行v-if判断，在内部进行v-for循环

v-for遍历避免同时用v-if

解决方法：

计算属性使用过滤信息替代条件判断

<template>
	<ul>
  	<li v-for='user in arr'
				:key='user.id'>
    		{{user.name}}
    </li>
  </ul>
</template>

export default{
	computed: {
    arr: function(){
      return this.user.filter(function (user) {
        return user.isActive
      })
    }
  }
}