作者：刘汉伟
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Vue.js从入门到项目实战试读：
前言
传统的网站开发一般采用HTML+CSS+JS“三驾马车”作为技术架构，而Vue立足于其上，以模板语法为基础，以数据绑定和组件化开发为核心，极大地简化了开发流程。使用Vue技术栈，开发者甚至可以在几分钟内搭建出一个完整的前端项目。
本书正是以Vue技术栈为核心，由浅入深地进行讲解。在语法学习之外，本书还将深入探讨和模拟底层机制的实现，从原生的角度剖析框架。最后，本书将以当前最常见的网站类型为例来讲解。
本书将选取有代表性和表达鲜明的示例，以实战示例讲解知识点，避免将理论架空和复杂化，并力图用浅显易懂的语言进行论述，最大程度地使文章内容更易于理解。对于一些最佳实践和优秀模式，本书还将划分小节对其进行专题讲述。与其他同类书籍相比，本书是从前端从业者的角度来思考和编写的，专注于解决学习者在职业生涯上遇到的困难和“瓶颈”。读者对象
本书适合以下读者群体阅读。（1）Vue初学者
初学者往往会发现上手Vue并不困难，但在项目开发中却不能灵活自如地使用它，接踵而来的程序漏洞和频繁变动的项目需求会使自己手忙脚乱，甚至想采用熟悉却更复杂的原生写法来进行开发。导致这种现象的根源在于他们对于Vue的理解还不够深，对Vue中暗藏的“黑魔法”无法敏锐地洞察，甚至仅在学习过语法之后就开始进行开发，以致在实战中无法根据具体情况采用最合适的方案。本书针对这一情况，特意将这些“黑魔法”总结出来并模拟实现许多框架底层的机制，深入浅出地对其进行讲解，意在让读者看懂会用。（2）原生或仿原生JS（Java Script）的从业者
Vue立足于JS，一切使用Vue进行开发的项目均可以使用JS进行开发，正如一切的编程语言都立足于电元信号的正负极，即01码，可为什么软件都不采用二进制编码来进行开发呢？这里面牵扯到一个成本的问题，这正是影响项目领导者进行决策的关键因素。Vue项目与原生JS或jQuery等仿原生框架项目相比，开发成本要低一些。与此同时，Vue项目对从业者的要求要高一些，待遇和前景要好一些。
如果你是一名原生JS的应用开发者，不妨学一手Vue，也许就此突破职业“瓶颈”，迎来职业生涯又一春天。本书将作为你成长路上的最佳伴侣。（3）对MVVM架构理念感兴趣的爱好者
从GitHub上被标星的次数来看，Vue从诞生至今，以其强大的特性和低廉的学习成本后来居上，已经成为MVVM框架中的最受欢迎者。从各个角度的对比来看，Vue也比在MVVM框架中同样具有代表性的Angular和React更出色一些，这点在本书中也有论述。毫无疑问，对Vue的学习将有助于你了解MVVM的架构理念，达到一叶知秋的效果。此外，本书还将演示多个采用MVVM架构的Web项目，在实战中践行理论，以呈现出最真实的观感。（4）大中专院校和培训机构等相关专业的学生
从本质上来讲，Vue属于前端技术栈中的一项实用技能，更适合于软件工程和计算机科学与技术等相关专业的同学学习。但如果你想跨专业就业的话，上手Vue也并不是一件难事，本书将带领你快速入门Vue的世界，前提是需要一定的前端基础。
多年以来，程序员的薪资待遇一直为人所羡慕且不断地提升，而前端工程师更是其中热门。从近年来的招聘信息来看，企业对于前端的要求也越来越高，“MVVM框架（Vue/ React/Angular）的使用经验”已成为Web应用项目招人的基本要求。本书将以理论结合实战的方式，由浅入深地对Vue进行讲解，脚踏实地，一步一个脚印，帮你筑基前端工程师之路。本书特色（1）示例为主，剖析为辅，一切尽在运行中，避免将理论架空
本书中的知识点均配以精心编制、具有代表性的示例，并力图将知识点融入示例中进行讲述，目的在于以示例为驱动演绎知识点，将理论生动形象化，避免大段理论带来的枯燥感和视野盲区。在由浅入深地讲述一套知识体系时，笔者将以同一示例为原型，不断对其进行丰富和变换，绝不会引入新的示例代码以增添读者的负担。此外，这些示例均是独立可运行的，读者完全可以在模仿和拓展中解决阅读时产生的疑惑。（2）理论与实践结合，在理论中洞察，在实践中感悟
本书的前六章内容重在讲解Vue的知识体系，力图使读者达到学有所知、学有所感的地步，使读者在接触到陌生的Vue代码片段时，能够知其优劣。而后五章内容以常见的网站类型为例，展示了Vue在项目开发中的运用，这些网站包括电商类网站（PC端）、企业官网（兼容PC和移动端）、资讯类网站（移动端）和工具类网站（PC端）。
以理论指导实践，以实践检验和丰富理论，这是一个螺旋上升的过程，也是认知新事物的正确方法。笔者希望以理论与实践相结合的方式，避免纸上谈兵，使读者不仅能够学有所知、学有所感，更能够学以致用。（3）多年经验和心得，大型项目的最佳实践和设计模式
笔者一直活跃于GitHub等开源社区，接触过国内外许多优秀项目的源码，并以软件工程的专业知识不断检验和更新自己的认知。在本书的创作过程中，笔者会将一些最佳实践和设计模式应用于示例和项目的开发中。对于一些常用的实践和模式，笔者还将划分小节对其进行专题讲述。在讲解Vue之外，笔者希望这本书能够对你的编程境界有所提升。本书愿景
从一无所知到略有心得，笔者也遇到过许多困难，借鉴过许多前辈的经验，也希望能够将自己的知识和心得分享出去，给走在路上的人照亮一段旅程。
本书从Vue的基础语法入手，逐步深入进阶特性，最后选取最具代表性的网站类型进行项目实战，其中穿插着各种最佳实践的讲解并模拟框架底层机制的实现，力图使同学们在理论学习中知其全貌，在实战中融会贯通。
希望这本书能够给你带来一定的收获和启发，在职业生涯上助你一臂之力。本书学前基础
Vue立足于JS，这意味着你在学习本书之前要具备扎实的JS基础，除了会用最基本的关键字和语法结构之外，你还需要掌握JS中的事件机制、DOM编程、闭包、对象引用和一些内置对象的常用方法等内容。当然，笔者也会在书中对这些内容进行简单的介绍，以确保不会对Vue的学习造成障碍。不过，作为一本前端技术的进阶用书，你的编程境界越高，你能体会的也就越多。
除了具备扎实的JS基础之外，你还需要掌握基本的CSS和HTML 5用法，这些是组件化开发中必不可少的内容。
在项目实战中，笔者将会使用一些CSS和HTML 5的高级特性或引入一些第三方组件库，缺乏相关开发经验的同学也许会对此感到陌生，不过也不必担心，笔者会对这些内容进行详细讲解。当然，它们也并不难于习得。本书内容及体系结构
本书共分为11个章节，其中第1~6章属于概念篇，用于描述理论体系；7~11章属于实战篇，用于演示实战项目。下面分别介绍这11个章节的内容。
第1章介绍Vue的发展历程、因果关系，这部分内容并不影响你对技术的掌握，如果你对此没有兴趣的话，可以跳过不看。
第2章首先介绍如何在项目中引入Vue，这是使用Vue的起点所在；之后介绍Vue实例和实例的生命周期并主题化讲解Vue中的数据链和数据绑定原理，了解这些将会让你在项目开发中大受裨益。
第3章介绍Vue中的插值绑定和常见指令的用法，这是Vue学习中的重点部分。
第4章讲述了三个方面的选项。其中，有关数据和方法的选项也是Vue学习中的重点部分，掌握这些和第3章的内容足以让你构建一个完整的Vue应用；有关DOM渲染的选项在本书的实战章节中没有主动用到，这些选项是否能派上用场取决于你所在项目的开发方式；有关封装复用的选项属于Vue进阶特性，学习难度相对较大，学好这些将使你的代码结构更加优雅且易于维护，从而在面对复杂功能和频繁的需求变动时游刃有余。
第5章讲述了Vue中内置的一些组件，这些组件封装了一些功能，用好这些将使开发变得更加简单。
第6章讲述了Vue技术栈中的其他成员，包括前端路由（Vue Router）、状态管理器（Vuex）和项目快速构建工具（Vue Cli），这些都将服务于Vue项目的开发。
从第7章开始，本书进入实战章节。
第7章和第8章演示了电商类网站的开发，涉及的内容还包括打包工具Webpack、字体图标库Font Awesome和缓存对象localStorage。
第9章演示了企业官网的开发，涉及的内容还包括响应式设计、翻页组件Swiper和网站多语的配置。
第10章演示了资讯类网站的开发，涉及的内容还包括移动端应用的开发。
第11章演示了工具类网站的开发，涉及的内容还包括可伸缩矢量图形SVG。本书学习建议
对于初次接触Vue的同学来说，最好你能耐心将本书读完，除了学会使用Vue之外，你的编程境界也会有所提高。
如果你急于应聘要求具备Vue使用经验的岗位，就需要掌握第3章和第4章中有关数据和方法的选项，并对第4章中有关封装复用和第5章、第6章的内容有所了解，之后快速进入实战，查看4个Web项目的源码和演示。在Vue的深水区游泳，还不至于窒息。
如果你喜欢听故事的话，不妨把第1章读一下，毕竟在日后的工作中能接触到的代码五花八门，能对这些代码的年代特征形成基本的认识，也是蛮不错的。
本书的知识点均配以示例，希望通过演示示例的方式使复杂和空洞的理论变得形象起来，这些示例的代码将随书附赠。希望同学们在学习时不要干嚼文字，对于不理解的地方一定要运行代码，空看十遍不如上手一试。
在后面的实战章节中，本书只摘取了部分具有代表性的代码和流程进行讲解，逻辑结构较为抽象，建议同学们先运行项目，对项目内容有个大致的了解，之后参照项目源码进行学习。辅助学习资料
●本书源代码
●本书辅助视频教程
以上内容，我们将存储在云端并提供下载链接（或二维码）。致谢
其实每一个项目都不是一蹴而就的，一开始的计划总是随着局势（团队领导者的想法、市场变动、客户需求等）的变化被不断地修改，项目总是在一次次试错的过程中不断地成长和成熟，在反复的优化和重构后，项目才有了最终的模样。其实，人的一生也是如此，我们总是在不停地遇到困难，不停地追寻答案，借鉴着别人的经验和心得，借助前辈们踏平的道路，才走到了我们现在的位置。过去，我常常在想，“为往圣继绝学，呵，这是多么伟大的志向”，然而事实上，我们每个人都在做着这件事。人类社会现有的文明也绝非少数人的功劳，这来自一代代人的传承。
这里，首先要感谢Vue团队的开源精神，他们的无私奉献使我们在项目开发时有了更多和更好的技术选择，同时也促成了本书的编写。
感谢本书的所有编校人员，在你们的支持和帮助下，这本书才有了更高的质量。
最后感谢我的家人和同事们，是他们的支持给了我充足的空间和自由进行创作。作者2018年10月第一篇概念篇——扎根于基础第1章 引言该部分主要介绍前端技术的发展历史和从MVC架构进化到MVVM的历程。笔者意图通过对这些内容的描述，使读者对工作和学习中遇到的一些代码的标准和年代特征形成一些基本判断和认识，并充分了解Vue这样的MVVM框架对高效率和高质量项目开发所起到的作用。1.1 前端技术的发展
纵观整个前端发展史，我们可以发现，几个关键的时间节点都是和重大的技术飞跃息息相关的，如Ajax的诞生、Node的问世等。笔者将结合这几个点，和大家一起回顾和展望前端开发的历史发展轨迹和未来发展前景。1.1.1 从静态走向动态
最初的网页是欧洲粒子物理研究所的科学家为了方便查看共享文档和论文，而基于XML（Extensible Markup Language）语言创造的，这也是为什么在前端开发中，最重要的全局对象被称为document而不是context、page、application等的原因。当时，网页只具备文本图片的显示及页面间相互跳转（Hyper Link）的功能，因此人们称为HTML（Hyper Text Markup Language）。
最初的Web，功能十分单一，开发也并不复杂。开发者先把写好的网页放在服务器指定位置（网站根目录）下，然后将映射URL分享给使用者，使用者在浏览器地址栏输入URL即可访问网页内容，如图1.1所示。图1.1 早期的浏览器和网页
早期的HTML作为静态文件，即使只有部分内容是需要变动的，那么有多少种变动的可能性，就需要准备多少份文档，这对开发者来说是非常不友好的，并且无法与用户进行交互。
CGI（Common Gateway Interface）的出现改善了这一情况。CGI作为服务器拓展功能，可以从数据库或者文件系统获取数据，在将数据渲染为HTML文档后，返回至客户端，从而实现了网页的动态生成。在接收到用户请求后，CGI还可以在服务端进行处理，并返回对应的处理结果，如图1.2所示。图1.2 动态网页渲染流程
CGI被广泛认为是服务端脚本语言的鼻祖。然而，它也有着非常致命的缺陷。首先，CGI每接收到一个请求，都会新开一个进程进行处理，占用服务器的CPU和内存，当请求量成千上万时，服务器可能无法支撑以致崩溃。其次，黑客很容易通过不完善的CGI程序非法进入开发者的服务器系统，这从安全方面来考虑是绝对不允许的。
以后来人的角度来看，笔者认为CGI出现的最大意义就是给当时刚起步的Web提供了一个发展方向。在这之后，PHP、JSP、ASP等各种服务端语言层出不穷，不仅弥补了CGI的缺陷，而且在性能上愈加高效，在开发上愈加简捷。这些语言的出现和广泛应用，使得Web技术飞速发展，前端网页从此从静态走向动态，这个时代被称为Web 1.0时代。1.1.2 从后端走向前端
在Web 1.0时代，前后端是如何协作的呢？由于网页是在服务端使用动态脚本语言和模板引擎渲染出来的，所以一般由前端先写模板，写好后交付给后端套用，之后再由前后端联调，以确认模板套用无误。
在这种开发环境下，前后端耦合密切，项目开发需要很高的沟通成本。在模板引擎的变量、判断和循环、宏区块等语法糖的支持下，前端也可以拿到环境变量来实现部分业务逻辑。如果前端开发者表现得稍微弱势一些，就很有可能被后台摁着在视图层实现一些业务代码。同时，整个项目的代码质量也随之降低。
网站的这种组织架构还会带来另外一些问题。比如，页面哪怕仅有一小块内容需要变更，浏览器也需要重新请求和渲染整个页面。一方面，网站资源的传输耗费了更多的时间；另一方面，页面重载的用户体验也十分糟糕。
举个例子，用户在登录页面输入了错误密码时，服务器要将校验信息渲染到页面并传给浏览器。实际上，页面只是多了一行类似于“密码错误”的提示，然而网站资源却需要重新进行传输，同时页面还会丢失用户输入的表单数据（即便到了今天，这种现象依然可以在一些政府和国企的老旧网站中看到）。
当时虽然出现了各种页面和数据的缓存技术，稍有成效地缓解了这一问题，但也无法从根本上解决问题。于是，从事Web的前辈们开始探寻其他一些解决方案，如Ajax异步数据加载。
Ajax（Asynchronous JavaScript And XML，异步JavaScript和XML）通过XMLHttpRequest对象，可以在不重载页面的情况下与Web服务器交换数据，再加上JavaScript的document对象，开发者们可以很轻松地实现页面局部内容刷新。
从1999年开始，ActiveX和XMLHttpRequest陆续问世，Ajax的星星之火渐渐燃起。时间推移到2005年，互联网巨头Google发布了全面使用Ajax打造的Gmail（如图1.3所示）和Gmap两款应用。人们惊讶地发现，原来使用异步数据传输获得的应用体验是如此地良好。自此，Ajax获得了井喷式的发展。图1.3 Gmail使用界面
得益于Ajax的发展，前后端分离的趋势日渐明显，前端不再需要依赖后台环境生存，所有服务器数据都可以通过异步交互来获取。在取得一个良好定义的RESTful （Representational State Transfer，表述性状态转移）接口后，两端甚至可以在零沟通成本的情况下并行完成项目任务。
随着Google V8引擎问世、PC和移动端设备性能提高、ES6和H5日趋成熟，浏览器端的计算能力和功能性似乎愈加过剩，开发者们开始将越来越多的业务逻辑代码迁移到前端，前端路由的概念也逐渐清晰。
路由这个概念首先出现在后台。传统Web网页间的跳转，需要开发者先在后台设置页面的路由规则，之后服务器根据用户的请求检索路由规则列表，并返回相应的页面。而前端路由则是在浏览器端配置路由规则，通过侦听浏览器地址的变化，异步加载和更新页面内容。
可以这么说，Ajax实现了无刷新的数据交互，而前端路由则实现了无刷新的页面跳转；Ajax将Web Page发展成Web App，而前端路由则给了Web App更多的可能，如SPA（Single Page Application，单页面应用），如图1.4所示。图1.4 单页面应用CSPA
Angular、React、Vue等知名的前端框架都有前端路由的概念。在之后的章节中，笔者会专门讲解前端路由的实现原理和Vue.js项目的核心内容之一——Vue Router。
现在，很多Web项目采用这样的架构，后台只负责数据的存取和组装，而前端则负责业务逻辑层和视图层的全部工作。这一路走来，项目重心已从后端转移到了前端。1.1.3 从前端走向全端
下面是笔者在2018年春节时，在CSDN（国内的技术交流社区）的官网上截取的一张图，如图1.5所示。读之深有体会，有兴趣的同学可以细细品味，这里不再多作赘述。图1.5 2018年CSDN春联
若要说2009年Web界最为爆炸性的新闻，那一定是Node.js的问世。
2009年2月，一个名叫Ryan Dahl的开发者在博客上宣布准备基于Google V8引擎创建一个轻量级的Web服务器并提供一套组件库。
同年5月，Ryan Dahl在GitHub上发布了最初版本的Node.js，这标志着Node.js的诞生。从此，Javascript也占据了服务端编程语言的一席之地。前端工程师可以以很低的成本用Node.js和MongoDB搭建一个后台。乍一看，前端工程师和全栈工程师之间的距离，只在于一个DataBase（数据库）。
从Node.js诞生至今，无论是新手还是专家，大批量地涌入Node社区，大家围绕着项目，使用并贡献着自己的力量，努力使之适用于更多的应用场景。这些年来，人们对Node.js褒贬不一，但毋庸置疑的是，它的问世必是前端发展史上浓墨重彩的一笔，如图1.6所示。图1.6 Node.js主页
这两年来，随着微信小程序和支付宝小程序的问世，前端技术早已超脱了Web和Hybrid应用的范围。前端工程师很容易基于固有技术栈快速上手和开发小程序类微应用。以微信小程序为例，框架使用语法通用的WXML代替HTML、WXSS代替CSS，开发语言由HTML+CSS+JS变为WXML+WXSS+JS。此外，与Vue.js一样，它们也是MVVM模式，如图1.7所示。图1.7 微信小程序开发
2018年3月20日，IT技术圈里又爆出一热搜新闻：小米、中兴、华为、金立、联想、魅族、努比亚、OPPO、vivo、一加十厂联合共建“快应用”的标准和平台。
快应用类似于小程序，不用下载和安装即可使用和生成桌面快捷方式，但有区别的一点在于，快应用不必依赖于微信或者支付宝这样的第三方平台，它是手机厂商从系统应用层面支持的。对于前端工程师来说，这又是一则喜讯，因为开发快应用使用的也是前端技术栈。
可以预见，未来的前端和前端衍生技术很有可能遍布从Web到桌面应用，从PC、移动端到智能电视、游戏机等的各个角落。
未来的工程师也许只分为两种，一种是负责数据方面的云端工程师，另一种则是全端（前端）工程师。1.2 MVVM族员——Vue.js
模型—视图—视图模型（Model-View-ViewModel, MVVM），本质上是MVC（模型—视图—控制器）的改进版，其最重要的特性即是数据绑定（data binding），此外还包括依赖注入、路由配置、数据模板等一些特性。1.2.1 从MVC到MVVM
模型—视图—控制器（Model-View-Controller, MVC）模式，在Web 1.0时代曾被广泛应用于Web架构中，然而其诞生的时间却比Web早几年。最初，MVC被应用于桌面程序中，在PHP、JSP等脚本语言诞生之后，也逐渐成为Web开发的主流模式。
View视图层是用户能够看到并进行交互的客户端界面，如桌面应用的图形界面、浏览器端渲染的网页等；Model指业务模型，用于计算、校验、处理和提供数据，但不直接与用户产生交互；Controller控制器则负责收集用户输入的数据，向相关模型请求数据并返回相应的视图来完成交互请求，如图1.8所示。图1.8 MVC模式
MVC模式实现了M和V的代码分离，M专注于数据，V专注于表达，C则在M和V之间架起了一座桥梁。即使采用同一个Model的数据，如果调用不同的View（如柱状图和表格），也会得到不同的页面呈现。这样的设计，不仅减少了Model层的冗余代码，使得Model和View更加灵活和易于维护，同时也简化了项目的架构和管理。
随着技术日新月异的更迭，MVC渐渐演化出更多的形态。虽然这些模式都有特定的名称，然而实际上它们都是MVC的衍生版本。因此，有的开发者也会将其统一称作“MV*模式”，MVVM即是其中的一种。
与MVC模式一样，MVVM的主要目的是分离视图（View）和模型（Model），ViewModel层封装了界面展示和操作的属性和接口。通过数据绑定，我们可以将View和ViewModel关联在一起，当ViewModel中的数据发生变化时，View也会同步进行更新，如图1.9所示。图1.9 MVVM模式
MVVM模式解耦了视图和模型。在模式中，每一个视图都有对应的一个ViewModel，同时ViewModel与模型建立联系。当接收到用户请求后，ViewModel获取模型响应的数据，并通过数据绑定将相应的视图页面重新渲染。模型层的数据只需要传入ViewModel即可实现视图的同步更新，从而实现了视图和模型之间的松散耦合。
与MVC不同的是，MVC是系统架构级别的，而MVVM是用于单页面上的。因此，MVVM的灵活性要远大于MVC。如果将这里的M抛开，只看VVM的话，那这就是一个组件（如treeview）的设计模式。所以，MVVM模式也是组件化开发的最佳实践。1.2.2 Vue.js简介
Vue.js是一套轻量级MVVM框架，由时任Google工程师的尤雨溪（现担任阿里Weex团队技术顾问）创作并开源。截至本书编写时，Vue.js已在GitHub获得star数9.3万个，而同为MVVM框架且更早诞生的React获得的star数不过9.5万个，Angular则是5.8万，如图1.10所示。
与其他重量级框架不同的是，Vue的核心库只关注视图层，并且提供尽可能简单的API以实现数据绑定、组件复用等机制，且非常容易学习并混入其他库。同时，Vue也完全有能力支持采用SPA设计和组合其他Vue生态库的系统。图1.10 MVVM框架单指标影响力对比1.3 Vue与React
在MVVM框架一族中，Vue.js的表现十分优秀。在1.3和1.4小节中，我们将分别看到Vue和React以及Vue和Angular的对比表现。
Vue和React都是轻量级框架，不过总体来看，Vue的性能是要高于React的，笔者简单罗列了以下几点。1.3.1 虚拟DOM
在处理用户界面时，DOM操作成本是最高的，两者都在渲染流程中采用虚拟DOM以降低页面开销，如图1.11所示。不过，Vue的虚拟DOM实现的层级更高一些，这也意味着Vue比React更轻量，性能更高一些。图1.11 渲染流程1.3.2 功能性组件
两者都提供一些功能性组件以减少用户开销。笔者运行GitHub上的一个测试项目（https://github.com/chrisvfritz/vue-render-performance-comparisons），该项目将渲染10 000个列表条目100次，得到的测试结果如下，如表1.1所示。表1.1 测试结果
React和Vue的速度都很快，不过显然Vue的渲染速度要更快一些，这是因为React中有大量用于提供警告和错误提示信息的检查机制。1.3.3 轻量级——将与核心库无关的业务封装成独立库
React和Vue都将着重点放在核心库上，也都有专门负责路由和全局状态管理等功能的配套库。例如，与React配套的有React Router、Redux，与Vue配套的有Vue Router、Vuex。1.3.4 视图模板
React采用JSX渲染组件，而Vue则采用模板，比如．vue后缀的文件。
JSX是使用XML语法编写Javascript的一种语法糖。语法如下： class HelloMessage extends React.Component { render() { return (
通过JSX，我们可以只用Javascript来构建视图组件。不过，对于从传统HTML+ CSS+JS分离开发走向组件化开发的前端工程师来说，这种语法感觉并不友好。
Vue提供了更简单的模板。语法如下：
Vue模板更贴合HTML，而不是用更高层的东西去封装它，学习曲线十分平缓。在Vue模板的style标签上标注scoped属性可划分作用域，使CSS样式表只作用于当前组件（具体实现机制将在后续章节中描述）。
由于Vue模板更贴近原生，因此，我们很容易混入其他一些东西，比如HTML的预处理器（Pug/Jade等）、CSS的预处理器（LESS、SASS/SCSS等），以及更高版本（高级）的脚本语言（TypeScript、ES6 Javascript等）。Vue模板的语法也更符合传统开发习惯，并易于团队分析和代码维护。1.3.5 其他
除框架本身外，Vue在其他方面也占据了一些优势，比如Vue的状态管理库vuex和路由库vue-router都是由官方维护更新，从而保证了这些库与Vue本身的统一性。而React的相关库则由社区进行维护，不过，这也使得React的社区生态更加繁荣一些。
此外，Vue提供了项目快速构建工具——vue-cli脚手架，提供了包含npm依赖管理、webpack模块打包、vue-router前端路由、eslint语法检测、单元测试等集成功能，能够让开发者快速构建一个高质量的项目环境。1.4 Vue与Angular
无论在代码体积和性能上面，Vue都比Angular1、Angular 2表现得优异许多，这里不再赘述。笔者选择了以下几个方面来对比分析Vue和Angular的表现。1.4.1 模板语法
Vue的许多语法和Angular十分相似，可以认为Angular是Vue的灵感之源。因为尤雨溪当时在Google创意实验室，使用的就是Google主推的Angular框架。但是，随着使用程度不断加深，尤感觉Angular十分笨重，因此这才创造了Vue。在Vue的诞生过程中，有很多地方都借鉴了Angular的语法习惯。
Angular 2语法：
- {{hero.name}}
Vue语法：
- {{hero.name}}
Vue与Angular 1相比最大的区别在于没有脏检测机制。在Angular 1中存在多个watcher，当watcher越来越多时，检测耗时会越来越长。因为作用域中每发生一次变化，所有watcher都要重新计算，而一些watcher在计算之后可能又会导致新的变化，并引发所有watcher重新计算，从而进入一种无限循环的脏检测。
Angular 1的处理方式是设置循环上限，比如10次，当循环达到10次，即中止循环。显然，这种脏检测机制性能十分低下、耗时长，并不适合大型Web应用。
Vue的处理方式则是全局只设置一个watcher，用这一个watcher来记录和更新一组关联对象的值，从而回避了脏检测的问题。
有意思的是，Vue最初是参考Angular的，而Angular 2则借鉴了Vue的机制，采用相似的设计来解决脏检测存在的问题。1.4.3 双向数据绑定
轻、重量级框架划分的标准是，是否过分参与系统结构级的架构和功能上的伸缩拓展。和Vue、React这样的轻量级框架相比，Angular在单向数据流的视图渲染、事件绑定之外，还参与了View对Model层的数据更新，即双向数据绑定。显然，它是一个重量级框架。
在单向数据绑定中，视图模板和动态数据被渲染成网页后，数据流即中止，如图1.12所示。之后，由ViewModel接手与View层的数据绑定。View层不可以直接修改Model层的数据，如果需要修改Model层的数据，则由ViewModel发起请求，这中间存在ViewModel和Model之间的数据同步传输。图1.12 单向数据绑定
然而，在双向数据绑定中，Model和View始终建立着联系，Model层的数据也一直保持着真实的状态，如图1.13所示。图1.13 双向数据绑定1.4.4 学习曲线
最后一点，广为人知且津津乐道的是，Angular的学习曲线十分陡峭，初学者可能会有一种坐过山车的感觉。不过，笔者在2016年，接触过一个使用Angular 1进行开发的项目，当时感觉坡度是有的，但没有那么夸张，也可能是因为应用比较浅吧。
Vue的学习曲线则较为平缓，在Ember、Knockout、Angular、React等前辈踏平的道路上，Vue有更多趋于成熟的最佳实践可以拿来使用，也有更多的经验教训可以参考，从而设计出更简便的API来实现更复杂的功能。同时，这也有效降低了团队开发成本，并使得大型Web项目的构建变得更加容易。第2章 基本介绍本章主要介绍Vue项目开发的一些前置知识，该部分内容包括Vue及其环境工具的安装使用、Vue实例的创建及其生命周期和Vue的数据响应式原理。笔者希望通过对这些知识点的描述，使读者能够对Vue所采用的的一些机制和方法产生基本的认识，知道如何上手去用和为什么要这样用，并能将这些内容更好地用于实战开发。2.1 安装和引入
本节内容将讲述如何在不使用项目构建工具的条件下，安装和引入Vue及其特定的调试工具。
对于原有的项目来说，由于Vue是一个轻量级、渐进式的JavaScript框架，所以你可以不用考虑将原有的技术架构直接引入Vue.js进行开发。即使在Angular的项目中引入Vue.js也是可以的，不过基本没有人会这么做，因为这会使得项目结构变得混乱和难以管理，并且完全没有必要。这是一个极端的例子，不过在某些并不极端的场合下，得益于Vue.js的灵活性，我们完全可以直接引入Vue.js。
上面所说的“直接引入”是相对于项目构建工具引入而言的。如果要开发全新的Vue项目，笔者建议使用项目构建工具Vue CLI，它可以快速构建一个“开箱即用”的大型单页应用，并提供了优秀的构建配置。之后，开发者只需要关注业务本身和核心代码的编写就可以了，之后会有专门的章节对其进行描述。2.1.1 如何引入Vue.js
可以在官网下载Vue.js的开发版本和生产版本，如图2.1所示，并通过
在这个实例中，笔者初始化了带有title数据的vm对象，并将其绑定到id为app的DOM节点上。
初始化时，在实例上绑定的常规数据对象会被Vue转化为被观察的拥有可响应行为的对象。简单地说，就是当数据发生变化时，会同步更新其数据链和作用域中所有的相关状态。最常见的情况就是，当实例数据发生变化时，视图也随之改变，如图2.6所示。图2.6 Vue实例2.2.2 生命周期
Vue实例在初始化时需要经历一系列过程，比如编译模板、渲染虚拟DOM树、将实例挂载到DOM上、设置数据监听和数据绑定等。在这些过程中也会运行一些钩子函数，允许开发者在不同的阶段注入自己的代码。
下面，笔者将上一小节中的简单实例稍微改造一下，为其绑定钩子函数并打印标识信息，用以观察这些钩子函数执行的时机。
改造后的实例代码如下（关于Vue的语法，笔者将在之后的章节中详细讲解）：
{{ title }}
刚打开页面，即Vue实例刚被创建并挂载到DOM上时，调用的钩子函数如图2.7所示。图2.7 创建和挂载时
当实例数据发生变化并触发视图更新时，调用的钩子函数如图2.8所示。图2.8 数据更新时
当实例被销毁时，调用的钩子函数如图2.9所示。图2.9 实例被销毁时
之后，多次点击“改变title”按钮，视图不再响应数据变化，如图2.10所示，因为此时节点上绑定的Vue实例已被销毁。图2.10 实例被销毁时
笔者参照官方译制了一份包含核心概念的生命周期图，如图2.11所示。现阶段，同学们只需要对此稍微了解即可，并不需要深入研究，这些并不影响你成为一名优秀的Vue开发者。本节的意图也只在于描述这样一个周期流程及于何时何处去使用这些钩子函数，对实现机制感兴趣的同学可以深入框架源码研究并欢迎随时通过邮件与笔者交流。图2.11 生命周期图
随着实战经验的不断累积，这张图或将对学习和开发产生更高的参考价值。2.3 数据响应式原理
Vue中最重要的概念就是响应式数据，一方面指衍生数据和元数据之间的响应，通过数据链来实现；另一方面则是指视图与数据之间的绑定。
本节将深入讲解这两方面的内容。2.3.1 初识数据链
数据链在学术上被定义为连通数据的链路。在这条链路上有一到多个数据起点（元数据），并通过该点不断衍生拓展新的节点（衍生数据），形成一个庞大的网状结构。当你修改数据起点时，所有存在在网上的节点值都将同步更新，如图2.12所示。图2.12 单一起点的数据链路
图2.12是只有一个起点的数据链，结构比较简单，当链路存在的数据起点越来越多时，结构会变得越来越复杂，如图2.13所示。图2.13 多起点的数据链路
得益于数据链，在Vue中我们可以通过修改元数据的值来触发一系列数据的更新。当然，我们在做数据结构的设计时，应该尽量降低数据链的复杂度。毕竟，代码是给机器读的，但也是给人看的。2.3.2 函数式编程
在上一小节中，元数据a和b通过变量声明即可实现： let a = 3, b = 4
但是衍生数据应该怎样实现从而保证其值只依赖于元数据而不允许被外界修改呢？这里先介绍一下函数式编程的概念。
函数式编程（Functional Programming）是一种结构化编程方式，力求将运算过程写成一系列嵌套的函数调用。
源于JS中“万物皆对象”的理念，函数式编程认定函数是第一等公民，可以赋值给其他变量、用作另一个函数的参数或者作为函数
试读结束[说明：试读内容隐藏了图片]