1.2　熟悉MV*模式

MVC是Web开发中应用非常广泛的一种架构模式，之后又演变成MVVM模式。

1.2.1　MVC模式

随着JavaScript的发展，渐渐显现出各种不和谐：组织代码混乱、业务与操作DOM杂糅，所以引入了MVC模式。

在MVC模式中，M指模型（Model），是后端传递的数据；V指视图（View），是用户所看到的页面；C指控制器（Controller），是页面业务逻辑。MVC模式示意图如图1-1所示。

图1-1　MVC模式示意图

使用MVC模式的目的是将Model和View的代码分离，实现Web应用系统的职能分工。MVC模式是单向通信的，也就是View和Model需要通过Controller来承上启下。

1.2.2　MVVM模式

随着网站前端开发技术的发展，又出现了MVVM模式。不少前端框架采用MVVM模式，例如，当前比较流行的Angular和Vue.js。

MVVM是Model-View-ViewModel的简写。其中MV和MVC模式中的意思一样，VM指ViewModel，是视图模型。

MVVM模式示意图如图1-2所示。

图1-2　MVVM模式示意图

ViewModel是MVVM模式的核心，是连接View和Model的桥梁。它有两个方向：

（1）将模型转换成视图，将后端传递的数据转换成用户所看到的页面。

（2）将视图转换成模型，即将所看到的页面转换成后端的数据。

在Vue.js框架中这两个方向都实现了，就是Vue.js中数据的双向绑定。