《Vue.j实战》一书 p171 练习 2 试做

练习2 ： 将该示例的render 写法改写为 template 写法，加以对比，总结出两者的差异性，深刻
理解其使用场景。

Demo效果在线浏览

解答：

1，使用render与template，其差异性，如同使用脚本语言与图形界面操作

2，使用render，专注点在各种精细的操作，使用template,注意力则主要放在数据的操作上，其底层如何运作，则为其次。

3，使用render，如同 开手动档汽车，何时挂何档，怎么让油门与离合器相配合，是重点

4，使用template，如同 开自动档汽车，一键启动后，不再需要操心离合器，一切自动搞定。

5，既要享受使用开自动波的乐趣，也要能知道一旦汽车抛锚，如何检测。

在table.vue中，删除了render函数，改为使用template，如下：

<template>
    <table>
        <colgroup>
            <col v-for="item in currentColumns" :key="item.key" :style="{item.width}">            
        </colgroup>
        <thead>
            <tr>
                <template v-for="(col, index) in columns">
                    <th v-if="col.sortable"  :key="col.title">
                        <span>{{col.title}}</span>
                        <a :class="{on:col._sortType === 'asc'}"
                        @click="handleSortByAsc(index)"
                        >↑</a>
                        <a :class="{on:col._sortType==='desc'}"
                        @click="handleSortByDesc(index)"
                        >↓</a>
                    </th>
                    <th v-else :key="col.title">
                        {{col.title}}
                    </th>
                </template>
            </tr>
        </thead>
        <tbody>
            <tr v-for="row in currentData" :key="row.name">
                <td v-for="cell in currentColumns" :key="cell.key">
                    {{ row[cell.key] }}
                </td>
            </tr>
        </tbody>
    </table>
</template>

再贴下render函数：

    render(h){
        var _this =this;
        var cols=[];
        this.currentColumns.forEach((col,index)=>{
            cols.push(h('col',{
                style:{
                    col.width
                }
            }))
        });
        var ths=[];
        this.currentColumns.forEach((col,index)=>{
            if(col.sortable){
                ths.push(h('th',[
                    h('span',col.title),
                    h('a',{
                        class:{
                            on:col._sortType === 'asc'
                        },
                        on:{
                            click(){
                                _this.handleSortByAsc(index)
                            }
                        }
                    },'↑'),
                    h('a',{
                        class:{
                            on:col._sortType==='desc'
                        },
                        on:{
                            click(){
                                _this.handleSortByDesc(index)
                            }
                        }
                    },'↓')
                ]));
            }else{
                ths.push(h('th',col.title));
            }
        })
        var trs=[];
        this.currentData.forEach(row=>{
            var tds = [];
            _this.currentColumns.forEach(cell=>{
                tds.push(h('td',row[cell.key]));
            });
            trs.push(h('tr',tds));
        });
        
        return h('table',[
            h('colgroup',cols),
            h('thead',[
                h('tr',ths)
            ]),
            h('tbody',trs)
        ])
    }