MVX

MVC框架最早出现在Java领域，逐渐在前端开发领域也被应用，相续出现了MVP，以及现在最成熟的MVVM。

MVC

MVC是应用最广泛的软件架构之一，分为Model（模型）、Controller（控制器）、View（视图）。基于分层的目的让彼此的职责分开。

• View通过Controller来和Model建立联系
• Controller是Model和View的协调者
• View和Model不直接联系，基本联系都是单向的。

MVC通信方式

用户操作应该放在什么位置呢，MVC之间又有什么变化呢？

用户通过Controller来操作Model以达到View的变化。

MVC通信方式

MVP

MVP 是从经典的MVC模式演变而来的，基本思想有相通之处：

• Controller/Presenter负责逻辑的处理
• Model 提供数据
• View 负责显示

在MVP中，Presenter完全把View和Model进行分离，主要的程序逻辑在Presenter里实现。

Presenter与具体的View是没有直接关联的，而是通过定义好的接口进行交互，从而使得在变更View时保持Presenter不变。

MVP通信方式

MVVM

MVVM代表框架有：知名度相对偏低的Knockout、早期的Ember.js，Google的AngularJS、Vue.js等。

MVVM只是把MVC的Controller和MVP的Presenter改成了ViewModel。View的变化会自动更新到ViewModel，ViewModel的变化也会自动同步到View上。

这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作。

MVVM用户操作影响

Vue.js是什么

Vue.js不是一个框架， 它只聚焦View，是一个构建数据驱动的Web界面的库。

Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统。

Vue.js

Vue.js特性

• 轻量
  除了以MVP模式代表的Riot.js外，Vue.js算是前端库里体积非常小的，但不依赖其他基础库。
• 数据绑定
  对于富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
• 指令
  类似AngularJS拥有内置的简单指令，也可自定义指令，通过对应表达式值的变化即可修改对应的DOM。
• 插件化
  Vue.js核心库不包括Router、AJAX、表单验证等功能，可方便地加载对应的插件。

Vue.js与其他框架的区别

与AngularJS的区别

AngularJS应用于PC端的复杂交互系统

相同点

• 支持指令 内置指令和自定义指令
• 支持过滤器 内置过滤器和自定义过滤器
• 支持双向绑定
• 不支持低端浏览器（IE6/7/8）

Vue.js使用比如Array.isArray的ES5特性，AngularJS1.3开始不支持IE8。

不同点

• AngularJS学习成本高，增加Dependency Injection特性，而Vue.js本身提供的API简单直观。
• 性能上AngularJS依赖对数据做脏检查，Watcher越多越慢。Vue.js使用基于依赖追踪的观察并使用异步队列更新，所有的数据都是独立触发的。对于庞大的应用来说，优化差异比较明显。

与React的区别

Facebook的React目前受关注度很高

相同点

• React采用特殊的JSX语法，Vue.js在组件开发中推崇编写.vue特殊文件格式，对文件内容约定，两者都需编译后使用。
• 开发思想相同：一切都是组件，组件实例之间可嵌套
• 提供合理的钩子函数，让开发定制化地去处理请求。
• 无内置AJAX、Router等功能到核心包，以插件方式加载。
• 组件开发中都支持mixins特性

不同点

• React依赖Virtual DOM，而Vue.js使用DOM模板。
• React采用Virtual DOM会对渲染出来的结果做脏检查。
• Vue.js在模板中提供指令、过滤器等，可方便快捷地操作DOM。

与Knockout的区别

Knockout非常轻量级，是兼容IE6+的MVVM框架。

相同点

• 数据和DOM元素绑定
• DOM元素基于模板
• 追求UI和数据关联自动刷新
• 支持依赖追踪

不同点

• Knockout所有可观测属性需手动用observable()来初始化，需要用函数调用方式来操作数据。
• Knockout没有ViewModel之间作用域的继承

与Reactive.js的区别

Reactive.js和Vue.js的API类似，通过实例化Reactive类传入元素和数据、模板等，它使用字符串模板，数据模板和Knockout一样用get和set，代码体积较大。

与Polymer的区别

2013年Google I/O之后推出的Polymer，提出Web Component早期规范性方案，如HTML Imports、Shadow DOM、数据绑定等。不过由于后续新版本对之前冲击较大，一度受到早期开发者的抱怨。

相同点

• 支持数据绑定
• 与Vue.js推崇的组件文件都是以.vue后缀组织结构类似

不同点

• Polymer推崇Web Component标准化，依赖浏览器环境的特性支持。若不支持则要加载对应的Polyfill。
• Polymer代码体积较大无法做到轻量级

与Backbone.js区别

定位不同，Vue.js专注于View，Backbone除了View之外，还提供Collection、Model、Router。Vue.js拥有数据绑定，而Backbone需手动通过事件来操作DOM。

与Riot的区别

作为React-like的MVP框架的代表，Riot不到10KB稳居第一，超越第二的Vue.js。

相同点

• API设计简单而专注学习成本低
• 提供自定义生命周期钩子开发者灵活使用
• 与主流工具集成度高支持与各种预编译工具集成
• 组件化思想，将HTML和JS、CSS混在一个组件中。
• 仅更新变化的元素

不同点

• Riot内置路由功能设计支持Virtual DOM
• Riot支持自定义标签，将标签内容放置在.tag文件中，使用script特殊的type="riot/tag"加载编译。
• 与Polymer初衷一样，推崇Web Component标准化，不依赖冗余的Polyfill。
• Riot支持服务端渲染
• Riot默认单向绑定