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

最新推荐文章于 2024-06-18 16:44:16 发布
最新推荐文章于 2024-06-18 16:44:16 发布
阅读量471 收藏 1
点赞数 1
分类专栏： VUE 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42028865/article/details/122818123
版权

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

解决办法：

在v-for的外层或内层包裹一个元素来使用v-if
用computed处理

weixin_42028865
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 双重v-for渲染表单，再复制表单编辑之深拷贝
一碗清深的博客
07-20 414
在复制表单之后，对表单进行修改，发现所有表单的值都同时改变，分析：表单没有进行深拷贝，而是引用的其它表单的值。
ElementUI使用v-if控制tab标签显示遇到的Duplicate keys detected: 'xxx'问题
bangjieq11363的博客
09-04 2315
今天工作遇到一个问题： 需求背景：页面中有几个tab，需要根据登录用户的权限控制tab标签的显示与隐藏 。 <el-tabs @tab-click="handleClick" v-model="activeTabName" ref="tabs" > <el-tab-pane label="用户管理" name="first" ref="fir...
v-if很耗费页面性能，用的比较多容易导致页面卡顿崩溃
想去旅行的静静的博客
04-16 4016
v-if很耗费页面性能，用的比较多容易导致页面卡顿崩溃
【经典面试题】v-if和v-for为什么不能同时使用，以及解决办法
王春燕的博客
05-19 907
原因： 由于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&
如何优化频繁的v-if造成的页面卡顿
最新发布
weixin_46681279的博客
06-18 585
如果v-if出现频繁，可以考虑把它转化为v-show，这样会减少 DOM 更新的频率，从而减少页面卡顿。5.使用Vue的异步更新：通过使用Vue.nextTick()或this.$nextTick()方法，可以让Vue在下一个tick更新组件，从而减少DOM操作带来的性能损耗。4.使用Vue的keep-alive：使用keep-alive缓存组件或页面，可以减少组件的重复创建和销毁，提升组件渲染的速度。6.使用Vue的缓存计算属性：在组件内部使用缓存计算属性可以减少重复计算的次数，从而提高页面的渲染速度。
Vue中为什么不建议v-if和v-for一起使用
茂茂的博客
01-06 660
Vue中为什么不建议v-if和v-for一起使用 我们先来看一段代码 <h-tab-pane v-for="(item, index) in tabItems" :key="index" :label="item.title" :id="item.id" :name="item.id" v-if="item.show"
v-for和v-if避免一起使用
parkwoojin1102的博客
01-11 547
v-for和v-if
避免在同一元素使用v-if、v-for
KleyChan的博客
07-18 351
很多场景下我们需要在同一元素上使用v-if、v-for，但这会出现渲染效率变低等问题，eslint校验规则也会报错误提示 开发中的常见错误用法： 在开发中需要在同一元素使用v-if 、v-for的两种情况，我们可以这样处理：（例子摘自vue风格指南） 为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。 为了避免渲染本应该被隐藏
v-if和v-for在一起用的弊端？如何解决？
05-17
将 `v-if` 和 `v-for` 放在同一元素上可能会导致性能问题，因为 `v-for` 具有比 `v-if` 更高的优先级，这意味着 `v-if` 在每个循环中都会被执行。因此，如果 `v-if` 表达式的值为 `false`，则将仍然迭代该项，这可能...
v-if,v-show,v-for的使用
yangsm的博客
06-21 523
v-if的使用 Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。 v-if的原理： v-if后面的条件为false时，对应的元素以及其子元素不会渲染。 也就是根本不会有对应的标签出现在DOM中。 <div id="app"> <h2 v-if="score>=90">优秀</h2> <h2 v-else-if="score>=80">良好</h2> <h2 v-else-if="score>=60"&
v-for和v-if避免一起使用的原因及解决方法
啊啊莹莹莹的博客
06-24 969
v-for和v-if避免一起使用的原因及解决方法
v-for与v-if一同使用时的注意事项
weixin_66059613的博客
11-27 274
v-for与v-if一同使用时的注意事项
v-for与v-if一同使用的注意事项
weixin_64227680的博客
11-27 210
vue2.0和vue3.0 对两者的优先级说法不一样，但是相同点就是都不能发在同一个节点上使用这两个指令，可以根据需求使用计算属性过滤一下或者置于外层元素 (或 < template >) 上。在vue官方文档里明确了v-for和v-if不推荐同时在一个节点使用。而原因就是它们两个的优先级不同，但是vue2.0文档和vue3.0文档里它们的优先级不一样。当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
工作日常--v-for中v-if引起的问题
小虾的博客
07-30 330
今天找bug找了好长时间，线上bug 问题：列表中左边部分没有显示，有的有显示，没有报错信息 解决方法： 1. 先是查看列表返回数据，发现全部都有返回数据 2. 然后比对数据的条目和没有数据条目区别，发现都一样，只有两个数据略有不同 3. id一个3位，一个4位，还有一个渠道列表字段一个为空数组，一个有数据。 4. 咋一看都不像会引起错误的 5. 把配置的关掉报错关掉，让报错信息暴露出来，通过看是否有报错来定位问题 6. 翻看代码找到循环渠道列表字段位置，发现在v-for中有v-if判断，这种是不被.
v-if和v-for同时使用的问题
徐三岁的博客
11-12 210
v-for的优先级比v-if高，每次渲染的时候会先遍历产生多个标签，然后v-if再对多个标签/对象进行判断，效率大大降低，尤其是在只需要对部分内容进行渲染的时候，同时使用就会存在这样的缺陷。 解决办法： 1.将v-if放在外部父级标签上，每次只执行一次，可以提高效率 2.用计算属性代替v-if，提升效率 ...
v-if 和 v-for不能同时使用的原因以及解决方法
热门推荐
weixin_53877433的博客
06-23 1万+
1.首先,v-for循环是作用在dom节点上的,如果同时使用的话，编译器会直接报错，告诉你v-if和v-for不能同时使用; 2.当和 v-for 一起使用时，v-for 的优先级比 v-if 更高; <div v-for="item in list" v-if="item .active" :key="item.id"> </div> 以上代码将会经过如下运算 this.list.map( item=> { if (ite
前端Vue循环渲数据时，控制字段的显示与隐藏，用v-if与v-for同时使用报错问题
m0_49714202的博客
07-13 1346
前端Vue循环渲数据时，控制字段的显示与隐藏，用v-if与v-for同时使用报错问题
Vue 在template的DOM中操作，v-for循环对象，判断键，值，控制元素的显示和隐藏
weixin_41346436的博客
12-08 1420
v-for 循环对象键值，判断键值以后控制元素的显示和隐藏 效果图 代码 //在DOM中处理 <div v-for="(val, keys, index) in remarkDetail01new" v-show="loadingButtoner01" :key="index.toString() + 'index'" class="lister04"> <div cl
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值