第 1 章　Vue.js简介

在过去的10年时间里，网页变得更加动态化和强大了。通过JavaScript，我们已经可以把很多传统的服务端代码放到浏览器中。身为一名前端工程师，我们所面临的需求变得越来越复杂。

当应用程序开始变复杂后，我们需要频繁操作DOM。由于缺乏正规的组织形式，我们的代码变得非常难以维护。

这本质上是命令式操作DOM的问题，我们曾经用jQuery操作DOM写需求，但是当应用程序变复杂后，代码就像一坨意大利面一样，有点难以维护。我们无法继续使用命令式操作DOM，所以Vue.js提供了声明式操作DOM的能力来解决这个问题。

通过描述状态和DOM之间的映射关系，就可以将状态渲染成DOM呈现在用户界面中，也就是渲染到网页上。

1.1　什么是Vue.js

Vue.js，通常简称为Vue，是一款友好的、多用途且高性能的JavaScript框架，能够帮助我们创建可维护性和可测试性更强的代码。它是目前所有主流框架中学习曲线最平缓的框架，非常容易上手，其官方文档也写得非常清晰、易懂。

它是一款渐进式的JavaScript框架。关于什么是渐进式，其实一开始我琢磨了好久，后来才弄懂，就是说如果你已经有一个现成的服务端应用，也就是非单页应用，可以将Vue.js作为该应用的一部分嵌入其中，带来更加丰富的交互体验。

如果希望将更多业务逻辑放到前端来实现，那么Vue.js的核心库及其生态系统也可以满足你的各种需求。和其他前端框架一样，Vue.js允许你将一个网页分割成可复用的组件，每个组件都有自己的HTML、CSS和JavaScript来渲染网页中一个对应的位置。

如果要构建一个大型应用，就需要先搭建项目，配置一些开发环境等。Vue.js提供了一个命令行工具，它让快速初始化一个真实的项目工程变得非常简单。

我们甚至可以使用Vue.js的单文件组件，它包含各自的HTML、JavaScript以及带作用域的CSS或SCSS。我本人在使用Vue.js开发项目时，通常都会使用单文件组件。单文件组件真的是一个非常棒的特性，它可以使项目架构变得非常清晰、可维护。

1.2　Vue.js简史

2013年7月28日，有一位名叫尤雨溪，英文名叫Evan You的人在GitHub上第一次为Vue.js提交代码。这是Vue.js的第一个提交（commit），但这时还不叫Vue.js。从仓库的package.json文件可以看出，这时的名字叫作Element，后来被更名为Seed.js。

2013年12月7日，尤雨溪在GitHub上发布了新版本0.6.0，将项目正式改名为Vue.js，并且把默认的指令前缀变成v-。这一版本的发布，代表Vue.js正式问世。

2014年2月1日，尤雨溪将Vue.js 0.8发布在了国外的Hacker News网站，这代表它首次公开发布。听尤雨溪说，当时被顶到了Hacker News的首页，在一周的时间内拿到了615个GitHub的star，他特别兴奋。

从这之后，经过近两年的孵化，直到2015年10月26日这天，Vue.js终于迎来了1.0.0版本的发布。我不知道当时尤雨溪的心情是什么样的，但从他发布版本时所带的格言可以看出，他心里一定很复杂。

那句话是：

“The fate of destruction is also the joy of rebirth.”

翻译成中文是：

毁灭的命运，也是重生的喜悦。

并且为1.0.0这个版本配备了一个代号，叫新世纪福音战士（Evangelion），这是一部动画片的名字。事实上，Vue.js每一次比较大的版本发布，都会配一个动画片的名称作为代号。

2016年10月1日，这一天是祖国的生日，但同时也是Vue.js 2.0发布的日子。Vue.js 2.0的代号叫攻壳机动队（Ghost in the Shell）。

同时，这一次尤雨溪发布这个版本时所带的格言是：

“Your effort to remain what you are is what limits you.”

翻译成中文是：

保持本色的努力，也在限制你的发展。

在开发Vue.js的整个过程中，它的定位发生了变化，一开始的定位是：

“Just a view layer library”

就是说，最早的Vue.js只做视图层，没有路由，没有状态管理，也没有官方的构建工具，只有一个库，放在网页里就直接用。

后来，他发现Vue.js无法用在一些大型应用上，这样在开发不同大小的应用时，需要不停地切换框架以及思维模式。尤雨溪希望有一个方案，有足够的灵活性，能够适应不同大小的应用需求。

所以，Vue.js就慢慢开始加入了一些官方的辅助工具，比如路由（Router）、状态管理方案（Vuex）和构建工具（vue-cli）等。

加入这些工具时，Vue.js始终维持着一个理念：“这个框架应该是渐进式的。”

这时Vue.js的定位是：

The Progressive Framework

翻译成中文，就是渐进式框架。

所谓渐进式框架，就是把框架分层。

最核心的部分是视图层渲染，然后往外是组件机制，在这个基础上再加入路由机制，再加入状态管理，最外层是构建工具，如图1-1所示。

图1-1　框架分层

所谓分层，就是说你既可以只用最核心的视图层渲染功能来快速开发一些需求，也可以使用一整套全家桶来开发大型应用。Vue.js有足够的灵活性来适应不同的需求，所以你可以根据自己的需求选择不同的层级。

Vue.js 2.0与Vue.js 1.0之间内部变化非常大，整个渲染层都重写了，但API层面的变化却很小。可以看出，Vue.js是非常注重用户体验和学习曲线的，它尽量让开发者用起来很爽，同时在应用场景上，其他框架能做到的Vue.js都能做到，不存在其他框架可以实现而Vue.js不能实现这样的问题，所以在技术选型上，只需要考虑Vue.js的使用方式是不是符合口味，团队来了新同学能否快速融入等问题。由于无论是学习曲线还是API的设计上，Vue.js都非常优雅，所以它具有很强的竞争力。

Vue.js 2.0引入了非常多的特性，其中一个明显的效果是Vue.js变得更轻、更快了。

Vue.js 2.0引入了虚拟DOM，其渲染过程变得更快了。虚拟DOM现在已经被网上说烂了，但是我想说的是，不要人云亦云。Vue.js引入虚拟DOM是有原因的。事实上，并不是引入虚拟DOM后，渲染速度变快了。准确地说，应该是80% 的场景下变得更快了，而剩下的20% 反而变慢了。

任何技术的引入都是在解决一些问题，而通常解决一个问题的同时会引发另外一个问题，这种情况更多的是做权衡，做取舍。所以，不要像网上大部分人那样，成天说因为引入了虚拟DOM而变快了。我们要透过现象看本质，本书的目的也在于此。

关于为什么引入虚拟DOM，以及为什么引入虚拟DOM后渲染速度变快了，第5章会详细介绍。

除了引入虚拟DOM外，Vue.js 2.0还提供了很多令人激动的特性，比如支持JSX和TypeScript，支持流式服务端渲染，提供了跨平台的能力等。

到目前，我写下这行文字的时间是2018年6月29日，Vue.js的最新版本是2.5.16。就在前几天，它在GitHub上的star数量已经超过了10万，同时超越了React在GitHub上的star数量。在GitHub上所有项目（所有语言）中排进了前五，目前是第4名，挤进前三指日可待。可能你在读这行文字的时候，Vue.js已经挤进前三了。

目前，Vue.js每个月有超过115万次NPM下载，Chrome开发者插件有17.4万周活跃用户（这是2017年5月的数据，现在可能会更多），这表示每天都有17.4万的人在使用它开发应用。

Vue.js在国内的用户有阿里巴巴、腾讯、百度、新浪、网易、饿了么、滴滴出行、360、美团、苏宁、58、哔哩哔哩和掘金等（排名不分先后），这里就不一一列举了。

在社区上，有300多位GitHub贡献者为Vue.js或者它的子项目提交过代码。社区项目也非常活跃，社区上有很多基于Vue.js的更高层框架和组件，比如Nuxt、Quasar Framework、Element、iView、Muse-UI、Vux、Vuetify、Vue Material等，这些项目在GitHub上都是几千个star的项目。

说了这么多，我想说的是，Vue.js已是一名前端工程师必备的技能。而想深入了解Vue.js内部的核心技术原理，就来阅读本书吧。