vue 简介
模型—视图—视图模型（Model-View-ViewModel, MVVM），本质上是MVC（模型—视图—控制器）的改进版，其最重要的特性即是数据绑定（data binding），此外还包括依赖注入、路由配置、数据模板等一些特性。
View视图层是用户能够看到并进行交互的客户端界面，如桌面应用的图形界面、浏览器端渲染的网页等；Model指业务模型，用于计算、校验、处理和提供数据，但不直接与用户产生交互；Controller控制器则负责收集用户输入的数据，向相关模型请求数据并返回相应的视图来完成交互请求，如图1.8所示。[插图]图1.8 MVC模式MVC模式实现了M和V的代码分离，M专注于数据，V专注于表达，C则在M和V之间架起了一座桥梁。即使采用同一个Model的数据，如果调用不同的View（如状图和表格），也会得到不同的页面呈现。这样的设计，不仅减少了Model层的冗余代码，使得Model和View更加灵活和易于维护，同时也简化了项目的架构和管理。
MVVM的主要目的是分离视图（View）和模型（Model），ViewModel层封装了界面展示和操作的属性和接口。通过数据绑定，我们可以将View和ViewModel关联在一起，当ViewModel中的数据发生变化时，View也会同步进行更新.
Vue.js简介
Vue.js是一套轻量级MVVM框架，由时任Google工程师的尤雨溪（现担任阿里Weex团队技术顾问）创作并开源。截至本书编写时，Vue.js已在GitHub获得star数9.3万个，而同为MVVM框架且更早诞生的React获得的star数不过9.5万个，Angular则是5.8万，如图1.10所示。与其他重量级框架不同的是，Vue的核心库只关注视图层，并且提供尽可能简单的API以实现数据绑定、组件复用等机制，且非常容易学习并混入其他库。同时，Vue也完全有能力支持采用SPA设计和组合其他Vue生态库的系统
Vue与React
-
在MVVM框架一族中，Vue.js的表现十分优秀。在1.3和1.4小节中，我们将分别看到Vue和React以及Vue和Angular的对比表现。Vue和React都是轻量级框架，不过总体来看，Vue的性能是要高于React的，笔者简单罗列了以下几点。
-
虚拟DOM在处理用户界面时，DOM操作成本是最高的，两者都在渲染流程中采用虚拟DOM以降低页面开销，如图1.11所示。不过，Vue的虚拟DOM实现的层级更高一些，这也意味着Vue比React更轻量，性能更高一些
-
-
功能性组件两者都提供一些功能性组件以减少用户开销。笔者运行GitHub上的一个测试项目（https://github.com/chrisvfritz/vue-render-performance-comparisons），该项目将渲染10000个列表条目100次，得到的测试结果如下，如表1.1所示。表1.1 测试结果[插图]React和Vue的速度都很快，不过显然Vue的渲染速度要更快一些，这是因为React中有大量用于提供警告和错误提示信息的检查机制。
-
轻量级——将与核心库无关的业务封装成独立库React和Vue都将着重点放在核心库上，也都有专门负责路由和全局状态管理等功能的配套库。例如，与React配套的有React Router、Redux，与Vue配套的有Vue Router、Vuex。
-
视图模板React采用JSX渲染组件，而Vue则采用模板，比如．vue后缀的文件。JSX是使用XML语法编写Javascript的一种语法糖。语法如下：
-
-
-
-
通过JSX，我们可以只用Javascript来构建视图组件。不过，对于从传统HTML+ CSS+JS分离开发走向组件化开发的前端工程师来说，这种语法感觉并不友好。Vue提供了更简单的模板。语法如下：
Vue模板更贴合HTML，而不是用更高层的东西去封装它，学习曲线十分平缓。在Vue模板的style标签上标注scoped属性可划分作用域，使CSS样式表只作用于当前组件（具体实现机制将在后续章节中描述）。由于Vue模板更贴近原生，因此，我们很容易混入其他一些东西，比如HTML的预处理器（Pug/Jade等）、CSS的预处理器（LESS、SASS/SCSS等），以及更高版本（高级）的脚本语言（TypeScript、ES6 Javascript等）。Vue模板的语法也更符合传统开发习惯，并易于团队分析和代码维护。
-
1.3.5 其他除框架本身外，Vue在其他方面也占据了一些优势，比如Vue的状态管理库vuex和路由库vue-router都是由官方维护更新，从而保证了这些库与Vue本身的统一性。而React的相关库则由社区进行维护，不过，这也使得React的社区生态更加繁荣一些。此外，Vue提供了项目快速构建工具——vue-cli脚手架，提供了包含npm依赖管理、webpack模块打包、vue-router前端路由、eslint语法检测、单元测试等集成功能，能够让开发者快速构建一个高质量的项目环境。
-
Vue与Angular
-
模板语法 Vue的许多语法和Angular十分相似，可以认为Angular是Vue的灵感之源。因为尤雨溪当时在Google创意实验室，使用的就是Google主推的Angular框架。但是，随着使用程度不断加深，尤感觉Angular十分笨重，因此这才创造了Vue。在Vue的诞生过程中，有很多地方都借鉴了Angular的语法习惯。
-
脏检测 Vue与Angular 1相比最大的区别在于没有脏检测机制。在Angular 1中存在多个watcher，当watcher越来越多时，检测耗时会越来越长。因为作用域中每发生一次变化，所有watcher都要重新计算，而一些watcher在计算之后可能又会导致新的变化，并引发所有watcher重新计算，从而进入一种无限循环的脏检测。Angular 1的处理方式是设置循环上限，比如10次，当循环达到10次，即中止循环。显然，这种脏检测机制性能十分低下、耗时长，并不适合大型Web应用。Vue的处理方式则是全局只设置一个watcher，用这一个watcher来记录和更新一组关联对象的值，从而回避了脏检测的问题。有意思的是，Vue最初是参考Angular的，而Angular 2则借鉴了Vue的机制，采用相似的设计来解决脏检测存在的问题。
-
双向数据绑定 轻、重量级框架划分的标准是，是否过分参与系统结构级的架构和功能上的伸缩拓展。和Vue、React这样的轻量级框架相比，Angular在单向数据流的视图渲染、事件绑定之外，还参与了View对Model层的数据更新，即双向数据绑定。显然，它是一个重量级框架。在单向数据绑定中，视图模板和动态数据被渲染成网页后，数据流即中止，如图1.12所示。之后，由ViewModel接手与View层的数据绑定。View层不可以直接修改Model层的数据，如果需要修改Model层的数据，则由ViewModel发起请求，这中间存在ViewModel和Model之间的数据同步传输。
然而，在双向数据绑定中，Model和View始终建立着联系，Model层的数据也一直保持着真实的状态。
-
-
学习曲线最后一点，广为人知且津津乐道的是，Angular的学习曲线十分陡峭，初学者可能会有一种坐过山车的感觉。不过，笔者在2016年，接触过一个使用Angular 1进行开发的项目，当时感觉坡度是有的，但没有那么夸张，也可能是因为应用比较浅吧。Vue的学习曲线则较为平缓，在Ember、Knockout、Angular、React等前辈踏平的道路上，Vue有更多趋于成熟的最佳实践可以拿来使用，也有更多的经验教训可以参考
