一.原因:
因为v-for的优先级比v-if的优先级高,所以每次渲染时都会先循环再进行条件判断,而又因为v-if会根据渲染条件为ture或false来决定渲染与否的,所以如果将v-if 和 v-for 用在一起会特别消耗性能
二.解决方法:
1.将v-if放在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环
2.如果条件出现在循环内部,不得不放在一起时,可通过计算属性computed提前过滤掉那些不需要显示的项
vue为什么避免v-if和v-for一起使用？
2023-08-14
64
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
vue为什么避免v-if和v-for一起使用？
目录
相关文章
|
4天前
|
缓存
监控
JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略：1) 精简代码和组件拆分以减少冗余；2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由；3) 数据懒加载和防抖节流处理高频事件；4) 图片压缩和选择合适格式，使用CDN加速资源加载；5) 利用浏览器缓存和组件缓存提高效率；6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法，可提升用户在复杂应用中的体验。
16
0
0
|
5天前
|
JavaScript
前端开发
|
4天前
|
JavaScript
开发工具
git
|
5天前
|
JavaScript
前端开发
定位技术
|
5天前
|
JavaScript
|
5天前
|
JavaScript
数据库
|
5天前
|
JavaScript
C++
|
5天前
|
JavaScript
前端开发
数据安全/隐私保护
|
5天前
|
JavaScript
|
5天前
|
JavaScript
前端开发
UED
热门文章
最新文章
1
vue项目开发笔记记录（一）
2
vue项目实战：实战技巧总结（中）
3
vue项目开发笔记记录（二）
4
vue项目使用可选链操作符编译报错问题
5
vue项目开发笔记记录（四）
6
乾坤子应用配置(vue3+vite)
7
vue3+vite项目配置ESlint
8
vue3+threejs+koa可视化项目——实现登录注册（第三步）
9
Vue的路由管理：VueRouter的配置和使用
10
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局（第一步）
1
在vue中，怎样理解 Vue 的单向数据流？
24
2
在vue中，Class 与 Style 如何动态绑定？
18
3
在vue中，v-show 与 v-if 有什么区别？
26
4
在vue中，如何实现SPA单页面应用的路由管理？
24
5
在vue中，说说你对 SPA 单页面的理解，它的优缺点分别是什么？
45
6
解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题
81
7
Vue中el与data的两种写法
19
8
Vue之数据绑定
15
9
使用Vue.js、Vuetify和Netlify构建现代化的响应式网站
47
10
初识Vue 输出Hello World 及注意事项
24