Vue2权威指南

内 容 简 介

Vue.，js 是一个用来开发 Web 界面的前端库。本书致力于普及国内 Vue.js 技术体系，让更多喜欢前端的人员了解和学习 Vue.js。如果你对 Vue.is 基础知识感兴趣，如果你对源码解析感兴趣，如果你对 Vue.js 2.0感兴趣，如果你对主流打包工具感兴趣，如果你对如何实践感兴趣，本书都是一本不容错过的以示例代码为引导、知识涵盖全面的最佳选择。

全书一共 30 章，由浅入深地讲解了 Vue.js 基本语法及源码解析。主要内容包括数据绑定、指令、表单控件绑定、过滤器、组件、表单验证、服务通信、路由和视图、vue-cli、测试开发和调试、源码解析及主流打包构建工具等。该书内容全面，讲解细致，示例丰富，适用于各层次的开发者。

第1遇见Vue.js

滴滴公共前端团队从2013年开始接触 React 和 AngularJS，以及后来的 Polymer，在项目实战中踩过了各种坑，参与了一些公司级的组件库开发和复杂业务模块的设计，也在与之配套的工程化闭环里做了很多解决方案。

回过头来看看，这几年的前端开发已经不再是去适配低版本的 PC 浏览器，对于大部分国内一线的移动互联网公司的前端开发者，移动端的前端项目需求尤其强烈，用户体验也一再被大家提及，页面已经不能简单地通过重新渲染来更新数据的频繁变化，后端的一些 MVC 模式也在往前端框架迁移。

在正式学习 Vue.js 之前，我们先和大家简单地回顾一下 MVX。

1.1 MVX 模式是什么

MVC 框架最早出现在 Java 领域，然后慢慢在前端开发中也被提到，后来又出现了MVP，以及现在最成熟的 MVVM，下面我们来简单介绍一下各种模式。

1.1.1 MVC

MVC是应用最广泛的软件架构之一，一般 MVC分为∶ Model（模型）、Controller（控制器）和 View （视图）。这主要是基于分层的目的，让彼此的职责分开，如图1-1所示。

View 一般都是通过 Controller来和 Model 进行联系的。Controller 是 Model 和 View 的协调者，View 和 Model不直接联系。基本联系都是单向的。

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

1.1.2 MVP

MVP是从经典的MVC模式演变而来的，它们的基本思想有相通的地方∶Controller/Presenter负责逻辑的处理，Model 提供数据，View 负责显示。

在 MVP中，Presenter 完全把 View和 Model进行了分离，主要的程序逻辑在 Presenter 里实现。而且，Presenter与具体的 View 是没有直接关联的，而是通过定义好的接口进行交互，从而使得在变更 View 的时候可以保持 Presenter 不变。MVP通信方式如图 1-3 所示。

1.1.3 MVVM

MVVM代表框架有∶知名度相对偏低的 Knockout、早期的 Ember.js、目前比较火热的来自 Google 的 AngularJS，以及我们今天要讲的 Vue.js。

相比前面两种模式，MVVM 只是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel。View 的变化会自动更新到 ViewModel，ViewModel 的变化也会自动同步到 View上显示。

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

1.2 Vue.js 是什么

Vue.js 不是一个框架——它只聚焦视图层，是一个构建数据驱动的 Web 界面的库。Vue.js通过简单的 API提供高效的数据绑定和灵活的组件系统。

先看看 Vue.js 的特性。

1. 确实轻量

除了以 MVP 模式代表的 Riot.js外，Vue.js 已经算是前端库里面体积非常小的，但不依赖其他基础库。

2. 数据绑定

对于一些富交互、状态机类似的前端 UI界面，数据绑定非常简单、方便。

3. 指令

类似于 AngularJS，可以用一些内置的简单指令（v-*），也可以自定义指令，通过对应表达式值的变化就可以修改对应的 DOM。

4. 插件化

Vue.js 核心库不包含 Router、AJAX、表单验证等功能，但是可以非常方便地加载对应的插件，后续章节我们会做完整的补充说明。

1.2.1 Vue.js 与其他框架的区别

相信很多读者都有一些其他框架（比如 AngularJS）的学习或者应用背景，本节将以对比方式来介绍各自的特点。

1.与 AngularJS 的区别

首先要提到的肯定是 AngularJS，它来自 Google，是目前国内最火的前端框架之一，应用于PC类的复杂类的复杂交互系统，我们内部也产出了一套基于它的 PC U组件库。那两者到底有什么区别呢?

相同点∶

〇 都支持指令——内置指令和自定义指令。

○ 都支持过滤器——内置过滤器和自定义过滤器。

〇 都支持双向绑定。

〇 都不支持低端浏览器（比如 IE6/T/8）∶

> Vue.js 使用比如 Array.isArray 的 ES 5特性。> AngularJS 1.3 开始不支持 IE 8。不同点∶

O AngularJS 的学习成本比较高，比如增加了Dependency Injection 特性，而 Vue.js 本身提供的 API 都比较简单、直观。

O 在性能上，AngularJS 依赖对数据做脏检查，所以Watcher 越多越慢。Vue.js 使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。对于庞大的应用来说，这个优化差异还是比较明显的。

链接：https://pan.baidu.com/s/1Yz7YvBk3pbIs-p6iAq68mQ

提取码：yfa7