Vue简要概述（Vue的使用意义以及MVVM）

VUE

Vue ：一款渐进式 JavaScript 框架 (渐进式就是逐步实现新特性)，

​ 如实现模块化开发、路由、状态管理等新特性。

​ 其特点是综合了 Angular（模块化） 和 React（虚拟 DOM） 的优点；

Axios ：前端通信框架；

​ 因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，

​ 此时就需要额外使用一个通信框架与服务器交互；

​ 当然也可以直接选择使用 jQuery 提供的AJAX 通信功能；

其他javaScript框架

jQuery：大家熟知的 JavaScript 框架，优点是简化了 DOM 操作，缺点是 DOM 操作太频繁，影响前端性能；

​ 在前端眼里使用它仅仅是为了兼容 IE6、7、8；

Angular：Google 收购的前端框架，由一群 Java 程序员开发，其特点是将后台的 MVC 模式搬到了前端并增加了模块化开发的理念，与微软合作，采用 TypeScript 语法开发；

​ 对后台程序员友好，对前端程序员不太友好；

​ 最大的缺点是版本迭代不合理（如：1代 -> 2代，除了名字，基本就是两个东西）

React：Facebook 出品，一款高性能的 JS 前端框架；

​ 特点是提出了新概念 【虚拟 DOM**】** 用于减少真实 DOM 操作，在内存中模拟 DOM 操作，有效的提升了前端渲染效率； 缺点是使用复杂，因为需要额外学习一门 【JSX】 语言；

UI 框架

• Ant-Design：阿里巴巴出品，基于 React 的 UI 框架
• ElementUI：饿了么出品，基于 Vue 的 UI 框架
• Bootstrap：Twitter 推出的一个用于前端开发的开源工具包
• AmazeUI：又叫“妹子 UI”，一款 HTML5 跨屏前端框架

JavaScript 构建工具

• Babel：JS 编译工具，主要用于浏览器不支持的 ES 新特性，比如用于编译 TypeScript
• WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载

前端 MVVM 模式

MVVM（Model-View-ViewModel）是一种软件架构设计模式

一种简化用户界面的事件驱动编程方式

MVVM 源自于经典的 MVC（Model-View-Controller）模式

MVVM 的核心是 ViewModel 层 ，负责转换 Model 中的数据对象来让数据变得更容易管理和使用

作用

• 该层向上与视图层进行双向数据绑定
• 向下与 Model 层通过接口请求进行数据交互

MVVM 框架：Vue.js ， AngularJS等

MVVM 模式和 MVC 模式一样，主要目的是分离视图（View）和模型（Model），好处：

• 低耦合： 视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
• 可复用： 你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。
• 独立开发： 开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
• 可测试： 界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

MVVM 的组成部分

View

View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建，为了更方便地展现 ViewModel 或者

Model 层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker 、 Thymeleaf 等等，各

大 MVVM 框架如 Vue.js ， AngularJS ， EJS 等也都有自己用来构建用户界面的内置模板语言。

Model

Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里

的难点主要在于需要和前端约定统一的 接口规则

ViewModel

ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的

Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。

MVVM模式的实现方式

Model：模型层，在这里表示 JavaScript 对象

View：视图层，在这里表示 DOM（HTML 操作的元素）

ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者

在 MVVM 架构中，是不允许 数据 和 视图 直接通信的，只能通过 ViewModel 来通信，而 ViewModel

就是定义了一个 Observer 观察者

• ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
• ViewModel 能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听 与 数据绑定

其它 MVVM 实现者

• AngularJS
• ReactJS
• 微信小程序

为什么要使用 Vue.js

• 轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 30多kb （Angular 压缩后 56kb+，React 压缩后 44kb+）
• 移动优先。更适合移动端，比如移动端的 Touch 事件
• 易上手，学习曲线平稳，文档齐全
• 吸取了 Angular（ 模块化 ）和 React（ 虚拟 DOM ）的长处，并拥有自己独特的功能，如： 计算属性
• 开源，社区活跃度高

Vue.js 的两大核心要素

数据驱动

​ 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用bject.defineProperty 把这些属性全部转为 getter/setter 。Object.defineProperty 是 ES5 中****一个无法 shim 的特性，这也就是为什么 Vue 不支持IE8以及更低版本浏览器。

组件化

• 页面上每个独立的可交互的区域视为一个组件
• 每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护
• 页面不过是组件的容器，组件可以嵌套自由组合（复用）形成完整的页面