在练习做cms管理系统有感而发.
请看下面两种新闻列表页的实现方式:

• 方式一

<?php foreach ($newsArr as $v) {?>
      <tr>
        <td>#<?php echo $v['id']?></td>
        <td><?php echo $v['title']?></td>
        <td>
          <a href="javascript:void(0);" class="alterBtn" id="alterBtn<?php echo $v['id']?>">修改</a> |
          <a href="javascript:void(0);" class="delBtn" id="delBtn<?php echo $v['id']?>">删除</a>
        </td>
        <td><?php echo $v['addtime']?></td>
      </tr>
<?php }>

• 方式二

<!--HTML代码-->
    <tr v-for="item in list">
          <td>#{{ item.id }}</td>
          <td>{{ item.title }}</td>
          <td>
            <a href="javascript:void(0);" v-on:click="alt(item)" class="alterBtn">修改</a> |
          <a href="javascript:void(0);" v-on:click="del(item)" class="delBtn">删除</a>
        </td>
          <td>{{ item.addtime }}</td>
      </tr>

//js代码

//渲染列表项
    $.get("news/listC.php","",function(response){
            var obj = JSON.parse(response);
            //绑定
            var newsTable = new Vue({
            el: '#newsTable',
            data: {
                list: obj,
            },
            methods: {
                alt:function(item){
                    layer.confirm(item.id);
                    console.log(item.id);
                },
                del:function(item){
                    var msg = "确认删除"+item.title+"吗?"
                    layer.confirm(msg,function(){
                        $.get("news/delC.php","id="+item.id,function(response){
                            if(response == "1"){
                                layer.msg("删除成功",{icon:1});
                                //重新渲染
                                console.log(newsTable.list[1].title);
                                $.get("news/listC.php","",function(response){
                                    newsTable.list = JSON.parse(response);
                                });
                                
                                //前端渲染
                                /* newsTable.list = newsTable.list.filter(function(node){
                                    if(node.id != item.id){
                                        return node;
                                    }
                                }); */
                            }else{
                                layer.msg("删除失败",{icon:2});
                            }
                        })
                    },function(){
                         layer.msg("用户取消",{icon:5});
                    });
                    console.log(item.id);
                }
            }
        })
    });

上述两种方式都可以展示新闻列表页:

• 第一种方式需要服务器去解析,会增加服务器端运算开销

• 第二种方式只需要从服务器获得JSON串就可以在前端完成渲染

显然第二种实现方式优势很大,那么还有必要在后台完成视图层渲染吗?
或者说MVC框架里的V层能不能完全交给前端来处理呢?