vue中v-if和v-for一起使用的弊端及解决办法(同时使用 v-if 和 v-for不推荐)

vue中v-if和v-for一起使用的弊端及解决办法

同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。

当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：

<!--
 这会抛出一个错误，因为属性 todo 此时
 没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

否则v-for比v-if优先级高，如果遍历的数组元素个数比较多，但是满足v-if条件比较少的情况下，会浪费性能，建议不要使用。而且，每次刷新页面时，都会执行这样性能不高的代码。

如果v-if在v-for里面的话， 可以用计算属性computed解决，通过数组方法filter过滤数组，v-for直接循环计算属性的结果，就不需要使用v-if了。而且computed是有缓存的，就是在它的依赖没有变化时，不会再执行对应计算属性的函数，就提高了性能。

如果v-if在v-for外层的话，可以使用<template>标签。

v-if和v-for不能一起使用的原因以及解决办法

原因：

由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降

解决方案：

第一种：将 v-if 和 v-for 分别放在不同标签中

<ul v-if="active">
   <li v-for="(item, index) in list" :key="inde">
       <p>{{item.name}}</p>
   </li>
 </ul>

第二种：如果 v-if 和 v-for 只能放在同一级标签中，使用计算属性进行改造：

let title = "自定义"
 <ul v-for="(item, index) in lists(list, title)" :key="index">
   <li>{{item.name}}</li>
 </ul>

computed: {
    lists () {
      return (item, name) => {
        return item.filter(item => item.name !== name)
      }
    }
  }

以上两种方法都可以解决 eslint 的报错。

到此这篇关于vue中v-if和v-for一起使用的弊端及解决办法的文章就介绍到这了,更多相关vue中v-if和v-for使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！