vue简述

1.1 MVVM 概述

什么是MVVM？

MVVM (Model-View-ViewModel) 是一种软件架构模式，是一种简化用户界面的事件驱动编程方式。

MVVM 源自于后端的MVC架构，MVVM 的核心是 ViewModel层，负责转换 Model 中的数据对象来让数据变得更容易管理和使用。

MVVM 作用

• ViewModel 层向上与视图层进行双向的数据绑定。
• 向下与Model 层通过接口请求进行数据交互。

双向数据绑定：

• 类似于Ajax，视图层可以动态的改变Model中的数据，Model也可以动态改变视图层的信息，而不需要整个网页的刷新。
• 以往对于html中的静态标签，如需改变需要改变代码，或者操作DOM元素并刷新整个页面，效率低下而且容易出现卡顿。

MVVM和MVC：

**M（Model）V（View + ViewModel）**C（Controller）

-----------------MVVM-----------------------

ViewModel 优点

• 低耦合：View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化时Model可以不变，当Model变化时View也可以不变。
• 可复用：可以把视图逻辑放在一个ViewModel里面，让很多View复用这段试图逻辑。
• 独立开发：开发人员可专注于业务逻辑和数据开发（ViewModel），设计人员可专注与页面设计。
• 可测试：界面素来是比较难于测试的，现在可以针对ViewModel来编写测试。

1.2 MVVM 组成部分

• Templates：视图层用来显示数据的模板，他监听了ViewModel中JavaScript返回的数据，替代了原来的DOM操作数据（现在叫虚拟DOM），通过Runtime和Compiler（即时编译，即时运行）实现了数据的即时更新，类似于AJAX。
• AJAX是实现前端和后端的通信，而ViewModel是前端将数据双向绑定视图层的技术。

View

View 既是 视图层，也就是用户界面，主要由HTML 和 CSS构建。

Model

Model 既是 数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。难点是在于需要和前端有约定统一的接口规则

ViewModel

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

ViewModel 所封装出来的Model数据模型包括视图的状态和行为两个部分，而Model层的数据模型是只包含状态的。

• 如页面这一块展示什么内容，那一块展示什么内容，属于视图的状态。
• 页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互）（以前由后台控制的转发和重定向现在也交给前台以行为来控制）

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

1.3 VUE

什么是VUE？

是一套构建用户界面的渐进式框架，可以自底向上逐层应用，Vue的核心库只关注视图层，与第三方库有很好的整合。

MVVM 的实现者

• Model：模型层，表示JavaScript对象。
• View：视图层，表示DOM（HTML操作的元素）
• ViewModel：连接视图和模型的中间件，Vue.js就是MVVM中ViewModel的实现者

在MVVM架构中，不允许数据和模型直接通信，只能通过ViewModel来通信，ViewModel就是这样的一个Observer（观察者）。

双向绑定：

• ViewModel 能够观察到数据的变化，并对视图的内容实时更新。
• ViewModel 能够监听到视图的变化，并能够通知数据发生改变。

总结：vue.js 就是一个MVVM的实现者，核心是实现了DOM监听和数据绑定。