vue经验帖——通用的部分考虑做成组件还是通用css样式

当前项目设计图的好几个列表有类似的列表项，之前浏览项目的时候出于组件化的想法下意识地就把他作为一个列表项组件来做了，各个列表中显示的不同内容再用条件判断。随着项目进行发现为了实现不同显示在列表项中需要用到大量的条件判断，组件代码量比想象的大很多、可读性变差等问题也出现了。

后期看项目看设计了解需求时对这种通用的部分，若是其中的差别较多、或者内容不一致时，除组件化外还考虑做成通用的css样式，如设置列表项的背景颜色、间距，列表项中行距、占用位置和定位等，然后将列表项内容写在对应列表所在文件内v-for。

如：

    组件化：

<-- 列表所在文件1 -->
<list-item v-for="(item,index) in list" :data="item">

<-- 列表所在文件2 -->
<list-item v-for="(item,index) in list" :data="item">

<-- 列表所在文件3 -->
<list-item v-for="(item,index) in list" :data="item">

<-- 列表项组件 -->
<template>
    <p v-if="data.ifTrue">abc<p>
    <div v-if="data.ifTrue2">abcd</div>
    <img v-if="data.ifTrue3" src="data.src" />
    ...

</template>

<script>
export default {
    method:{
        function(){
            if(){
                this.data = {}
            }
            else if(){

            }
            ...   

        }
    }
}

    当列表项组件中需要做很多条件判断的时候，这个组件就会变得很臃肿（T_T）

    通用css:

<-- 列表所在文件1 -->
<div class="list-item" v-for="(item,index) in list1" :key="index">
    <p>abc</p>
</div>

<-- 列表所在文件2 -->
<div class="list-item" v-for="(item,index) in list2" :key="index">
    <div>abcd</div>
</div>

<-- 列表所在文件3 -->
<div class="list-item" v-for="(item,index) in list3" :key="index">
    <img src="src">
</div>

    另一种方案

（悔恨的泪）