初识前端框架Vue.js

• Vue.js是什么？

• Vue是一个轻量级渐进式的Javascript框架，具有简单易学、小巧灵活、性能优越的特点。与react一样，具有整套生态工具系统。

• Vue属于前端MVVM框架，Vue主要专注于MVVM框架的View层，核心是VM-ViewModel

• 什么是MVC、MVP、MVVM？

• MVC：Model-View-Controller

  
  
  

  MVC

  MVC通信：当用户界面View改变时指令单向传递到Controller，业务逻辑完成后再要求Model的数据改变状态，最后改变的数据显示到View层上。以上都是单向通信。MVC可以分两种情况接收用户指令，一种是View接收、一种是Controller接收。

• MVP：Model-View-Presenter

  
  
  

  MVP

  MVP通信：View层不再与Model发生通信，都是通过Presenter实现。MVP里View与Presenter、Presenter与Model的通信都是双向的。MVP里View不部署任何逻辑，所有的逻辑部署在Presenter里

• MVVM：Model-View-ViewModel

  
  
  

  MVVM

  MVVM通信：与MVP通信相似，不同的是MVVM中的View与ViewModel之间使用数据双向绑定，当View变化时ViewModel同时进行变化。

• MVVM理解：View是UI组件，作用是呈现数据。Model为数据模型。ViewModel是同步View 和 Model的对象。ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来。我们就只需要关注业务逻辑，不用操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

• Vue.js适用的场景。

  • Vue-MVVM框架适用于H5页面，H5页面的View层不仅需要数据展示，还需要管理复杂数据状态、处理移动设备上的操作行为。
  • MVVM可以解决以下三种问题：
    1大量调用DOM：因为大量的操作DOM，使得代码异常的多，而且难以维护。
    2DOM操作的性能问题：当大量DOM操作时会使页面渲染性能降低，加载速度缓慢。
    3数据频繁变化时View的更新：用户操作导致Model频繁变化时，需要复杂的工作和处理复杂的诗句状态将变化的数据同步到View层中。

• Vue.js与react.js、angular.js在学习时有什么区别？

• angular.js1.x是一个大而全的框架使用者必须遵循它的一套规则，vue与其相比有着很多相似的地方，而且vue解决了angular的许多问题，学习曲线也更加平滑。

• vue与react都有一套自己的生态圈，react学习前必须知道JSX 和 ES2015语法，vue起步时可以轻易创建简单程序开始学习。