大量使用v-if判断字段的显示和隐藏会有性能问题吗

我在给一个系统做移动端页面展示,很多的详情页面数据字段非常多,有的字段甚至可能超过了上百个,现在我有一个新需求,需要对不同的人展示不同的字段,那么我在每个字段上面加入一个v-if=标识(判断标识由后端返回来)来判断这个字段是否可以进行展示,请问这种大量使用v-if的情况,是否存在性能开销?

如果不频繁切换,v-if比v-show合适;

我也是想利用v-if去进行判断,但是因为页面的字段太多了,每个字段都绑定v-if去判断显隐,我并不知道这个对页面渲染来说是否造成一定性能影响

字段多的话,可以拆分成多个组件,然后用异步、动态组件来加载。

个人建议啊,不同角色computed里判断是否显示;用一个方法,传入需要控制的角色,决定是否渲染;基本上你现在不卡,加了v-if应该不会卡;楼上说的动态组件也ok,是一个解决方案。

这样的想法,作为前端压力倍增,因为手里大概捏了2.30个模块,前端这样控制,属实有些繁琐,而且我这边的详情界面并不是由上而下铺写了百八十个字段,假设界面有一百个字段,这一百个字段,是分段显示,每一段都有一个大标题,比如这样,

,甚至当我更改页面的某一个字段时,其他部分中的字段需要显示或隐藏,而流程流走以后哪个角色需要看到什么界面,其实是由后端去固定的,我这边只负责显示,考虑用v-show,v-show绑那么多不知道会有问题吗,楼上的想法也在研究,但精细度严格要求到了每个字段上面,拆分成组件这种形式,后端说后期配起来压力会大

其实也很简单呀。
比如定义一个数组:

const showCol = [
'报销单号',
'出差申请单',
'出差原因',
'报销单状态',
'报销日期',
'报销人部门',
'报销人',
...
]

然后在模板里面 v-for =“showCol”,这样数组里面有哪些字段,就会显示哪些字段了。

粒度细,够灵活。

想的有些简单了,字段显示在页面上的信息处理过程包含非常之多,比如只读,必填,隐藏,字段标题,实际显示值!字段排序,控制字段点击事件,失焦事件,change,touchstart等等事件,不是没想过抽取模板,只是太费劲!其实我只是想问下大量使用v-if或者v-show会不会有性能问题。。。。。。

  1. v-if一定会有的性能开销。
  2. 用v-show DOM结构也会加载只不过是在样式中添加display:none;
  3. 建议不要用使用,可以用组件传参的形式书写。
  4. 用了N多的v-if之后的页面如果优化需求,慢慢腐烂度很高不可维护。

其实也不难呀,可以看看这里的演示:
http://localhost:3000/vite2-vue3-demo/ctrl/elcrud

拖拽列表的表头(th)可以调整字段的先后顺序,还可以设置列的对齐方式,还可以移除字段。

点击“添加测试”,可以打开表单。

在表单里面,可以调整“列数”,拖拽标签(比如“日期”),可以调整排序,可以移除字段。

点“分类”里的几个圈圈,可以控制字段的显示和隐藏。

至于控件的其他属性,也是可以控制的,只是维护代码还在完善中。

对了,这些都是基于 json 动态渲染的,使用 vue3 + element-plus 实现。

感谢,其实现在已经感觉到腐烂度很高了,你说的那个低代码平台,我要没记错的话,我是见过来着,忘了叫啥,直接拖就行,找一些感兴趣的东西时,碰见过,但是对我来说已经没用了,原因是这边用的vue2,见到他的时候代码也已经没法推平重来了,写了太多,我现在手里捏的20多个应用,每张页面的字段数量少则几十,多则上百,所以腐烂度这个词用的太好了,但是为了客户的操蛋需求,也只能曲线救国了

其实,那个是我自己写的。
我是比较懒,一直是这种动态的表单,否则。

膜拜一下,低代码平台开发挺棒的,我们公司好像也是研发这样一种低代码平台,不过时pc的,那边的开发我没参与,这样的项目github,我看到好多,但是手机端确实只看到一个,有时间好好研究下 :grin: :grin: :grin: :grin:

还在完善中,预计年底能出完整demo吧。
现在是pc的web,不过把UI库换成vant,应该可以变成手机的web吧。理论上,打算支持各种UI库。