Vue项目中如何避免表格表头与移动端data-title变量重复声明

优化实现方案（消除重复声明） #

你完全不需要单独声明consoleDataTitle这类独立变量，直接把表头相关属性全部聚合到tableHeader配置里，就可以实现桌面端表头、移动端data-title两处逻辑复用：

第一步：优化Vue实例的data结构 #

var basic = new Vue({
    el: '#basic-table-container',
    data: {
        // 删掉单独的4个dataTitle变量，全部配置到tableHeader中
        tableHeader: [
            {
                header: 'Console',
                prop: 'console' // 对应items里的字段名
            },
            {
                header: 'Firm',
                prop: 'firm'
            },
            {
                header: 'Release',
                prop: 'release'
            },
            {
                header: 'Units Sold',
                prop: 'units'
            }
        ],
        items: [
            // 原有items内容保持不变
            { 
                console: 'PlayStation 2',
                firm: 'Sony',
                release: '2000',
                units: '155 Million'
            },
            { 
                console: 'DS',
                firm: 'Nintendo',
                release: '2004',
                units: '154 Million'
            },
            { 
                console: 'Game Boy',
                firm: 'Nintendo',
                release: '1989',
                units: '119 Million'
            },
            { 
                console: 'PlayStation 4',
                firm: 'Sony',
                release: '2013',
                units: '116 Million'
            },
            { 
                console: 'PlayStation',
                firm: 'Sony',
                release: '1994',
                units: '103 Million'
            },
            { 
                console: 'Wii',
                firm: 'Nintendo',
                release: '2006',
                units: '102 Million'
            }
        ]
    }
})

第二步：优化HTML模板，实现表头、单元格逻辑复用 #

<script src="https://unpkg.com/vue@2.6.9/dist/vue.js"></script>

<div id="basic-table-container">
  <table class="table">
    <thead>
      <th v-for="col in tableHeader" :key="col.prop">{{ col.header }}</th>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.console">
        <!-- 单元格也用循环，直接从tableHeader取header当data-title，用prop取对应字段值 -->
        <td v-for="col in tableHeader" :key="col.prop" :data-title="col.header">
          {{ item[col.prop] }}
        </td>
      </tr>
    </tbody>
  </table>
</div>

该方案的优势是后续新增字段只需要修改tableHeader一处配置，不用再调整模板或者单独新增变量，完全消除了重复声明的问题。

Vue开发相关最佳实践建议 #

• 同类型的配置项尽量聚合维护，不要零散声明单个变量，比如表头、表单字段这类统一用数组/对象配置，后续维护成本更低
• 循环的key尽量用唯一的固定值，不要用索引或者可变的展示文本，比如上述tableHeader循环用prop（字段名固定唯一）比用header更稳妥，避免后续修改表头文字导致key变化触发不必要的重渲染
• 数据和视图尽量解耦，所有展示用的文本优先放在配置里，不要硬写在模板中，后续做国际化或者文案调整时只需要改配置即可
• 如果是Vue2项目，尽量用单文件组件（.vue文件）的形式开发，不要在html里直接写模板，可维护性和扩展性都更好
• 变量命名尽量语义化，避免出现无意义的缩写，比如模板里的循环变量用col in tableHeader比table in tableHeader更准确，因为每一项是列配置不是表格

内容的提问来源于stack exchange，提问作者Terminator