认识MVC和MVVM模式
在学习 Vue.js 之前，我们先来了解一下 MVVM（Model-View-ViewModel，模型－视图－视图模型）模式，它是一种基于前端开发的架构模式。MVVM 最早出现于 2005 年微软推出的基于 Windows 的用户界面框架 WPF，它其实是一种编程设计思想，既然是思想，就不限于在什么平台或者用什么语言开发。基于 MVVM 的诸多优点，其在当今移动和前端开发中应用得越来越广泛。
传统的MVC模式
如果读者了解 MVC(Model-View-Controller) 模式，那么 MVVM 模式应该更好理解。传统的 MVC 模式包括以下三部分：
-
视图(
View)：用户界面。 -
控制器(
Controller)：业务逻辑。 -
模型(
Model)：数据存储。
Model 代表数据存储，主要用于实现数据的持久化；View 代表用户界面(UI)，主要用于实现页面的显示；Controller 代表业务逻辑，串联起 View 和 Model，主要用来实现业务的逻辑代码。在 MVC 模式中，用户的交互行为在 View 中触发，由 View 通知 Controller 去进行对应的逻辑处理，处理完成之后通知 Model 改变状态，Model 完成状态改变后，找到对应的 View 去更新用户界面的显示内容，至此完成对用户交互行为的反馈。由此可见，整个流程由 View 发起，最终在 View 中做出改变，这是一个单向的过程。当年流行的 backbone.js 就是 MVC 的典型代表。
流行的MVVM模式
MVVM 是把 MVC 中的 Controller 去除了，相当于变薄了，取而代之的是 ViewModel。所谓 ViewModel，是一个同步的 View 和 Model 的对象，在前端 MVVM 中，ViewModel 最典型的作用是操作 DOM，特点是双向数据绑定(Data-Binding)。
在双向数据绑定中，开发者无须关注如何找到 DOM 节点和如何修改 DOM 节点，因为每一个在 View 中需要操作的 DOM 都会有一个在 Model 中对应的对象，通过改变这个对象，DOM 就会自动改变；反之，当 DOM 改变时，对应的 Model 中的对象也会改变。ViewModel 将 View 和 Model 关联起来，因此开发者只需关注业务逻辑，不需要手动操作 DOM，这就是 ViewModel 带来的优势，如图1-1所示。
MVVM 让开发者更加专注于页面视图，从视图出发来编写业务逻辑，这也符合正常的开发流程，而 Vue.js 就是一个典型的从视图(View)出发的前端 MVVM 框架。从 Vue 的英文发音 /vju:/ 类似 View 就可以参透其中的奥秘。