第 1 章 Vue.js简介

第 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内部的核心技术原理,就来阅读本书吧。

目录