v-if和v-for——Vue性能优化 | 青训营

Vue性能优化——v-if和v-for

在代码中,将v-forv-if同时使用,在vue2和vue3中有不同的结果

v-if和v-for不能同时出现

以下为简单代码示例,包括数据data和html代码

  data() {
      return {
          arr: [
              { name: 'Mary', isShow: true },
              { name: 'Kate', isShow: false },
              { name: 'John', isShow: true },
              { name: 'Tom', isShow: false },
              { name: 'Jerry', isShow: true }
          ],
      }
  }
  <div id="app">
      <template>
          <ul>
              <li v-for="(item, index) in arr" :key="index" v-if="item.isShow">{{ index }}: {{ item.name }}</li>
          </ul>
      </template>
  </div>
  • 在vue2中,可以正常运行,得到如下结果,0,2,4的顺序也可以说明v-for先运行:

1692376229909.png

  • 而在vue3中,则会出现错误提示:

1692375572247.png

  • 这是由于在vue2和vue3中v-ifv-for的优先级不同:

    • vue2中,v-forv-if的优先级更高,v-if 的条件可以访问到 v-for 作用域内定义的变量别名
    • vue3中,v-if 比 v-for 的优先级更高, v-if 的条件将无法访问到 v-for 作用域内定义的变量别名

大家可以参考官方文档:列表渲染 | Vue.js (vuejs.org)

解决方案

法一:

  • v-if不依赖v-for时,我们可以将v-if写在v-for的外层,这样就可以让v-if判断优先

当然,这种方法不适合我们的例子

如果是要通过v-if控制整个ul列表的出现,则可以通过在代码进行以下修改来实现,当然不要忘记声明ifShowList

  <template v-if="ifShowList">
      <ul>
          ...
      </ul>
  </template>

当然,<template></template>不是必须的,如果用其他标签也是可以的

法二:

  • v-if的判断条件依赖于v-for的某个值时(item,index),也就是我们例子的情况,可以通过计算属性进行过滤的方法,直接遍历过滤后的列表,像这样在计算属性中过滤的成本远比v-if的成本低
  computed:{
      newArr(){
          return this.arr.filter(item => item.isShow)
      }
  }
  <div id="app">
      <ul>
          <li v-for="(item, index) in newArr" :key="index">{{ index }}: {{ item.name }}</li>
      </ul>
  </div>
  • 最后的执行结果如下:

1692377412937.png

总结

  • v-ifv-for不能一起使用的原因是他们的优先级不同,在vue2中v-for的优先级比v-if的优先级高,一起使用会造成性能浪费
  • 解决方案:把v-if放在v-for的外层;把需要v-for的属性先从计算属性中过滤一次

虽然在vue3中v-if优先级比v-for的优先级高,但还是建议不要在一起使用

全部评论

相关推荐

爱看电影的杨桃allin春招:我感觉你在炫耀
点赞 评论 收藏
分享
一名愚蠢的人类:多少games小鬼留下了羡慕的泪水
投递荣耀等公司10个岗位
点赞 评论 收藏
分享
点赞 收藏 评论
分享
牛客网
牛客企业服务