【VUE】v-if和v-for的优先级

v-if和v-for

  • v-if 用来显示和隐藏元素
    flag为true时,dom元素会被删除达到隐藏效果
html 复制代码
    <div class="boxIf" v-if="flag"></div>
  • v-for用来进行遍历,可以遍历数字对象数组,会将整个元素遍历指定次数
html 复制代码
<!--    遍历数字-->
    <div v-for="num in 5" :key="num">{{ num }}</div>
<!--    遍历对象-->
    <div v-for="(value,key) in obj" :key="key">{{value}}</div>
<!--    遍历数组-->
    <div v-for="(item,index) in list" :key="index">{{item}}</div>

如果将遍历元素v-for和删除元素v-if连用,会发生什么?

v-if和v-for的优先级

首先,在vue官网中是不建议v-for和v-if连用

  • 在Vue 2中,v-for的优先级比v-if高 ,因此在连用的时候会先进行v-for将所有元素渲染到页面上之后,再进行v-if判断删除元素,这样会导致性能的浪费(每次先渲染元素再进行判断删除)
    官网上给了一个例子,可以简单理解一下。在这个例子中会先将用户进行遍历渲染(v-for),再去判断用户是否为活跃用于(v-if)。在这里只需要活跃用户渲染,但是由于v-for的优先级更高,因此无论是否为活跃用户都会渲染,这样会造成资源的浪费。
html 复制代码
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
  • 在Vue 3中,v-if的优先级比v-for高
    看看官网上给的例子,给一个用户列表,遍历活跃用户(user.isActive为true)。
html 复制代码
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

Will throw an error, because the v-if directive will be evaluated first and the iteration variable user does not exist at this moment.(将抛出一个错误,因为v-if指令将首先求值,并且迭代变量user此时不存在。)

由官网给的解释可以看出,直接将v-if和v-for连用可能会出现报错,因此不建议在同一节点中连用

解决方案

vue2提供的解决方案

1.添加一个属性。将 users 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。

2.将 v-if 移动至外层容器元素上。

activeUsers过滤出满足条件的用户,将遍历的users改为activeUsers

javascript 复制代码
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}
html 复制代码
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

或者使用嵌套关系,将v-if添加到外层元素上。先判断是否要展示用户信息,满足条件再进行渲染。

html 复制代码
<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

Vue2风格指南相关部分

Vue3提供的解决方案

1.添加一个属性。将 users 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。(与Vue2相同)

2.将 v-for移动至外层容器元素上。

第一个方法与vue2相同,不过多进行解释。

第二个方法:嵌套。与vue2不同的是,在vue3中,将v-for移动至外层的元素上

html 复制代码
<ul>
  <template v-for="user in users" :key="user.id">
    <li v-if="user.isActive">
      {{ user.name }}
    </li>
  </template>
</ul>

Vue3风格指南相关部分

总结

在Vue2中,v-for的优先级更高。在Vue3中,v-if的优先级更高。
无论哪个优先级更高,都不建议在同一节点连用v-if和v-for。

相关推荐
没有鸡汤吃不下饭1 小时前
前端【数据类型】 No.1 Javascript的数据类型与区别
前端·javascript·面试
码流之上1 小时前
【一看就会一写就废 指间算法】设计电子表格 —— 哈希表、字符串处理
javascript·算法
Asort4 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
真夜4 小时前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
我是日安4 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
艾小码4 小时前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
干就完了14 小时前
js对象常用方法都在这,使用时想不到?不存在的
前端·javascript
艾小码4 小时前
还在硬邦邦跳转页面?Vue这3招让应用丝滑如德芙!
前端·javascript·vue.js
子兮曰4 小时前
🚀前端依赖配置避坑指南:深度解析package.json中devDependencies的常见误解
前端·javascript·npm
forever_Mamba4 小时前
实现一个高性能倒计时:从踩坑到最佳实践
前端·javascript