一、渐进式框架
什么是 vue？ 查看 vue 官网，有一句话是这么写的：Vue.js（读音 /vju体化/，类似于 view） 是一套构建用户界面的渐进式框架。
说到框架，就有人提出疑问，框架和库的区别是什么？ 库是一种插件，是一种头数种好的特定方法的集合。 提供给开发者使用，控制器在用户手里。 而框架是一套架构，会基于自身特定向用户提供一套相当完整的解决方案，控制权在框架本身，用户需要按照框架所规定的某种特定规范进行开发。
什么是渐进式框架？
渐进式的含义，我的理解是：没有多做职责之外的事。 Vue 的核心功能，是一个视图模板引擎，但这不是说 Vue 就不能成为一个框架。 如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎），可以在我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。 更重要的是，这些功能相互独立，你可以在核心功能以及选择选择任意选用其他的部件，不一定要全部整合在一起。 可以看到，所说的"渐进式"，其实就是Vue 的使用情况，同时也体现了 Vue 的设计理念。 渐进式框架的大概意思就是你可以只用我的一部分，而不是用了我这一点就必须用我的所有部分。
Vue 的渐进式表现为：声明式渲染——组件系统——客户端路由——-大数据状态管理——-构建工具。
二、虚拟 DOM
JS 的运行速度已经很快了，然而大量的 DOM 操作就会变得很慢，但是前端本身就是要通过 JS 处理 DOM 来更新视图数据的。 这样在更新数据后会重新渲染页面，这样就造成在没有改变数据的地方也重新渲染了 DOM 节点。 这样性能方面就会很受影响。 利用在内存中生成与真实 DOM 与之对应的数据结构，这个在内存中生成的结构虚拟虚拟 DOM。 当数据的监测时，能够智能的计算出重新渲染组件的最小代价并应用到 DOM 操作上。 Vue 就是利用了这一点。
三、MVVM 模式
MVVM 是 Model-View-ViewModel 的缩写，它是一种基于前端开发的一个模型模式，其核心是提供对 View 和 ViewModel 的双向数据是什么，这使得 ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 Vue.js 是一个提供了MVVM风格的数据绑定的 Javascript 库，并不于 View 层。 它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel 负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。
为什么会出现 MVVM 呢？
MVC 即 Model-View-Controller 的缩写，就是 模型—视图—控制器，也就是说一个标准的 Web 应用程序是由这三组成的部分：
1. View ：用来把数据以某种方式呈现给用户
2. Model ：其实就是数据
3. Controller ：接收并处理来自用户的请求，并将Model返回给用户
在 HTML5 还未火起来的那些年，MVC 作为 Web 应用的最佳实践是 OK 的，这是因为 Web 应用的 View 层相对来说比较简单，前端所需要的数据在后端基本上都可以处理好，View 层主要是做一下展示，那时候提倡的是 Controller 来处理复杂的业务逻辑，所以 View 层相对来说比较轻量，就是所谓的瘦客户端思想。
为什么前端要工程化，要是使用 MVC？
相对 HTML4，HTML5 最大的亮点是它为移动设备提供了一些非常有用的功能，使得 HTML5 具备了开发 App 的能力，HTML5 开发 App 最大的好处就是跨平台、快速迭代和上线，节省人力成本和提高效率，因此很多企业开始对传统的 App 进行改造，逐渐用 H5 代替 Native，到 2015 年的时候，市面上大多数 App 或多或少都嵌入了 H5 的页面。 既然要用 H5 来构建 App， 那 View 层所做的事，就从简单的数据展示了，它不仅要管理复杂的数据状态，还要处理移动设备上各种操作行为等等。 因此，前端也需要工程化，也需要一个类似于 MVC 的框架来管理这些复杂的逻辑，使开发更加高效。 但这里的 MVC 又稍微发了点变化：
View ：UI 布局，展示数据
Model ：管理数据
Controller ：MODEL 更新到 View 上
这种 MVC 的开发模式对于简单的应用来看是 OK 的，也符合软件的分层思想。 但实际上，随着 H5 的不断发展，人们更希望使用 H5 开发的应用能和 Native 媲美，或者接近于原生 App 的体验效果，于是前端应用的复杂程度已不同往日，今非昔比。 这时前端开发就暴露出了三个痛点问题：
1、开发者在代码中大量调用相同的 DOM API，处理繁琐 ，操作冗余，使得代码难以维护。
2、大量的DOM操作使页面渲染性能降低，加载速度变慢，影响用户体验。
3、当 Model 日生产在无发，开发者需要主动更新到 View ; 当用户的操作导致 Model 开发者同样需要将变化同步的数据到 Model 中，这样的工作不仅繁琐，而且很难维护多变的数据。
其实，早期 jquery 的出现就是为了前端能更简洁的操作 DOM 而设计的，但它只解决了第一个问题，另外两伴随着个问题始终前端一直存在。 MVVM 的出现，完美解决了以上三个问题。
MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在 Model 中调配调数据修改和操作的业务逻辑; View 代表UI，它负责将数据模型进行成UI研究来，ViewModel是一个同步View和Model的对象。
在MVVM的这一方面下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel的交互是双向的，因此View数据在同步到Model中，而Model数据的火箭立即反应到View上。
ViewModel 通过双向数据绑定把View层和Model层连接了起来，而View和Model的市场不会同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。
Vue.js 可以说是 MVVM 而且，与2016年最佳实践，从MVVM中的ViewModel，不仅做到了数据双向绑定，而且也是一款相对来比较轻的JS库，API简洁，很容易上手。
四、Vue 实例
每一个应用都是通过 Vue 这个构造函数来创建根实例启动的。
var vm = new Vue({
// 选项
})构造函数中需要传入一些选项对象。 包含挂载元素、数据、模板、方法等等。
五、总结
Vue 框架的优势可总结为：有指令（分支结构，循环结构... ），复用页面结构等;有实例成员（过滤器，监听），可以对渲染的一个图形做二次格式化;有组件（模块的复用或组合），快速搭建页面。
具体展开如下：
具体展开如下：
1 轻符方框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 KB
2 简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习
3 双向绑定数据：Vue.js 会自动响应数据的情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。
这也就是Vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作DOM对象，有更多的时间去思考业务逻辑。
4 组件化：Vue.js 通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。
5 视图、数据和结构的分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。
六、参考资料
1. 《MVVM 模式理解》来源网站：MVVM模式理解 - 古兰精 -博客园 （cnblogs.com）
六、参考资料
1. 《MVVM 模式理解》来源网站：MVVM模式理解 - 古兰精 -博客园 （cnblogs.com）
评论