Vue介绍
1、什么是Vue
Vue.js是目前最火的前端框架，React是最流行的前端框架。和Angular.js与React.js一起并称为前端三大主流框架。Vue.js是一套构建用户界面的框架，只关注视图层。
- 框架：是一套完整的解决方案，对项目的侵入性非常大。
- 库：提供某一个功能的解决，对项目的侵入性很小。
2、MVC与MVVM的关系
MVC是一种设计模式，它将应用划分为3个部分：数据(模型)、展示层(视图)和用户交互层，交互如下图所示：
MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新。
一个事件的发生是这样的过程：
- 用户和应用产生交互。
- 控制器的事件处理器被触发。
- 控制器从模型中请求数据，并将其交给视图。
- 视图将数据呈现给用户。
在MVC中我们大量的操作了DOM，而大量操作DOM会让页面渲染性能降低，加载速度变慢，影响用户体验。最后就是当Model频繁变化的时候，开发者就主动更新View，那么数据的维护就变得困难。世界是懒人创造的，为了减小工作量，节约时间，一个更适合前端开发的架构模式就显得非常重要。这时候MVVM模式在前端中的应用就应运而生。
MVVM让用户界面和逻辑分离更加清晰。下面是MVVM的示意图，可以看到它由Model、ViewModel、View这三个部分组成：
Model：在MVVM中，我们可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为（格式化数据由View的负责），这里可以把它理解为一个类似json的数据对象。
View：MVVM中的View通过使用模板语法来声明式的将数据渲染进DOM，当ViewModel对Model进行更新的时候，会通过数据绑定更新到View。
ViewModel：业务逻辑也主要集中在这里，其中的一大核心就是数据绑定。数据同步交给了ViewModel中的数据绑定进行处理，当Model发生变化，ViewModel就会自动更新；ViewModel变化，Model也会更新。
整体来看，比MVC/MVP精简了很多，不仅仅简化了业务与界面的依赖，还解决了数据频繁更新（以前用jQuery操作DOM很繁琐）的问题。因为在MVVM中，View不知道Model的存在，ViewModel和Model也察觉不到View，这种低耦合模式可以使开发过程更加容易，提高应用的可重用性。
不同的MVVM框架中，实现双向数据绑定的技术有所不同。目前一些主流的前端框架实现数据绑定的方式大致有以下几种：
- 数据劫持 (Vue)
- 发布-订阅模式 (Knockout、Backbone)
- 脏值检查 (Angular)
这里主要讲讲Vue：
Vue采用数据劫持&发布-订阅模式的方式，通过ES5提供的 Object.defineProperty() 方法来劫持（监控）各属性的 getter 、setter ，并在数据（对象）发生变动时通知订阅者，触发相应的监听回调。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。要实现Vue中的双向数据绑定，大致可以划分三个模块：Observer、Compile、Watcher，如图：
- Observer 数据监听器
负责对数据对象的所有属性进行监听（数据劫持），监听到数据发生变化后通知订阅者。 - Compiler 指令解析器
扫描模板，并对指令进行解析，然后绑定指定事件。 - Watcher 订阅者
关联Observer和Compile，能够订阅并收到属性变动的通知，执行指令绑定的相应操作，更新视图。Update()是它自身的一个方法，用于执行Compile中绑定的回调，更新视图。
3、Vue基本代码与MVVM的关系
以下最简单的Vue代码如下(需要先导入vue的包)：
以上是 Vue介绍 的全部内容， 来源链接： utcz.com/z/375207.html
