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

Posted 2022-07-31 sx00xs

练习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="width: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:
                    width: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)
        ])