这篇文章主要介绍“该不该把控制流v-for指令写入通用结构组件中”,在日常操作中,相信很多人在该不该把控制流v-for指令写入通用结构组件中问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”该不该把控制流v-for指令写入通用结构组件中”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联是一家集网站建设,蓝田企业网站建设,蓝田品牌网站建设,网站定制,蓝田网站建设报价,网络营销,网络优化,蓝田网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
一个孤独的子组件
当嵌套开始变多时,如果我还想要保持整洁,我的默认做法是将代码提取到一个新组件中。
使用v-for和v-if,我们把指令中的所有东西都转换成它自己的组件。
举个例子来看看,我们从这个有嵌套的模板开始
{{ title }}
{{ item.title }}
{{ item.description }}
接着,我们把 v-for 里面的内容提取到一个新的组件中:
{{ item.title }}
{{ item.description }}
如果我们导入这个新组件,我们会看到它很好地摆脱了所有嵌套:
{{ title }}
此示例中没有太多的嵌套,所以单独为一小部分内容做一个组件,有点繁琐。但是,如果我们有两个,三个或更多的嵌套级别,则此技巧可以消除嵌套结构并让代码更易于理解。
但这里有一个问题:为什么我们不把v-for指令也写入新的组件中?
我们应该把控制流指令放入新的组件中吗?
假设,我们上面的 v-for 放到新的组件内,则我们会得到下面的结构:
这样看上去,父组件确实清晰很多。但不幸的是,这种变向的把复杂度放到了子组件中:
{{ item.title }}
{{ item.description }}
哪种方式更好?
如果你最终的目的就是想减少嵌套数量,那么这个选择肯定更糟糕。我们在子组件中添加了额外的嵌套级别,而没有减少父组件中的嵌套级别。
通常,我会避免将诸如v-if和v-for之类的控制流指令放在这样的组件的根部,因为它会影响可重用性。
如果只需要一个简单ListItem 该怎么办?
假设使用v-if,如果要使用不同的逻辑在组件之间进行切换,或者要使用完全不同的组件怎么办?
将控制流指令写小最小通用结构的组件中会限制我们的灵活性,而不会给我们带来更多的便利性。因此,我倾向于将控制流指令留在这样的小组件之外。我还尝试避免将它们放在组件的根部。
一旦你深入了解“底层”的情况,此问题及其解决方案就会显得更加有优势。
到此,关于“该不该把控制流v-for指令写入通用结构组件中”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
当前名称:该不该把控制流v-for指令写入通用结构组件中
当前路径:http://lswzjz.com/article/ihpiho.html