简述前端MVVM框架

 一张图说明：

1、一句话总结：

vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定。

2、mvc和mvvm的关系：

c（控制层）被换成了vm（viewmodel）层

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。

mvvm层实现了前后端更好的分离（前端需要的数据只需要请求后端的接口即可）

3、MVVM框架编码实例

Vue 的 View 模板：

<div id="app">
    <p>{{message}}</p>
    <button v-on:click="showMessage()">Click me</button>
</div>

Vue 的 ViewModel 层（下面是伪代码）：

var app = new Vue({
    el: '#app',
    data: {     // 用于描述视图状态（有基于 Model 层数据定义的，也有纯前端定义）
        message: 'Hello Vue!',  // 纯前端定义
        server: {}, // 存放基于 Model 层数据的二次封装数据
    },
    methods: {  // 用于描述视图行为（完全前端定义）
        showMessage(){
            let vm = this;
            alert(vm.message);
        }
    },
    created(){
        let vm = this;

        // Ajax 获取 Model 层的数据
        ajax({
            url: '/your/server/data/api',
            success(res){
                // TODO 对获取到的 Model 数据进行转换处理，做二次封装
                vm.server = res;
            }
        });
    }
})

 

服务端的 Model 层（省略业务逻辑处理，只描述对外接口）：

{
    "url": "/your/server/data/api",
    "res": {
        "success": true,
        "name": "IoveC",
        "domain": "www.cnblogs.com"
    }
}

4、前端框架MVVM出现的最大意义是什么： 

MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。

MVVM用接口实现了前后端数据的通信，这样可以使前后端之间的业务逻辑没有什么关系。

MVVM在感觉上要比mvc模式前后端要分的更开

5、应用MVVM框架的vue.js框架的最主要作用是什么：

前端數據的統一：前端应用相同数据的位置实现了数据的统一
双向数据绑定：綁定后vue好dom數據保持統一，一動全動，是前端的

双向数据绑定中的两向分别为 view和viewmodel。

6、前端框架MVVM中的vm层是干嘛的：

ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。

View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

7、MVVM简述举例：

View一般就是我们平常说的HTML文本的Js模板，里面可以嵌入一些js模板的代码，比如Mustache，比如jstl类似的模板伪代码

ViewModule层里面就是我们对于这个视图区域的一切js可视业务逻辑，举个例子，比如图片走马灯特效，比如表单按钮点击提交，这些自定义事件的注册和处理逻辑都写在ViewModule里面了

Module就更简单了，就是对于纯数据的处理，比如增删改查，与后台CGI做交互