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

顺晟科技：

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

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

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

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

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

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

可视化生成 json 文件的小工具。

大佬 demo应该完结了吧

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

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

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

粒度细，够灵活。

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

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

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

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

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

欢迎关注一下

封装UI库（elementPlus），实现更简洁的使用方式。

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

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

一直在重构呀。

如果不频繁切换，v-if比v-show合适；

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

这样的想法,作为前端压力倍增,因为手里大概捏了2.30个模块,前端这样控制,属实有些繁琐,而且我这边的详情界面并不是由上而下铺写了百八十个字段,假设界面有一百个字段,这一百个字段,是分段显示,每一段都有一个大标题,比如这样, ,甚至当我更改页面的某一个字段时,其他部分中的字段需要显示或隐藏,而流程流走以后哪个角色需要看到什么界面,其实是由后端去固定的,我这边只负责显示,考虑用v-show,v-show绑那么多不知道会有问题吗,楼上的想法也在研究,但精细度严格要求到了每个字段上面,拆分成组件这种形式,后端说后期配起来压力会大

对UI库做二次封装的纯JavaScript函数，支持更多的UI库的时候便于复用。