《Vue.js快跑：构建触手可及的高性能Web应用》
书海网短评：
适读人群：本书适合对HTML和JavaScript已有一定了解，正在准备或已经使用Vue.js进行Web应用程序开发的从业者，也适合希望通过学习框架使用来提升对其认识的开发人员，有React使用经验的读者同样可从中获得启发。
编辑推荐
适读人群：《Vue.js快跑：构建触手可及的高性能Web应用》适合对HTML和JavaScript已有一定了解，正在准备或已经使用Vue.js进行Web应用程序开发的从业者，也适合希望通过学习框架使用来提升对其认识的开发人员，有React使用经验的读者同样可从中获得启发。带你迅速领略运用Vue.js——组织与简化Web开发中流行的JavaScript框架——构建既快又灵的单页Web应用。有了这本实践指南，你将迅速获得从基本用法到自定义组件以及更多高级特性——甚至包括JSX，即JavaScript语法扩展。作者CallumMacrae向你展示了如何使用Vue生态系统中*实用的库，比如实现客户端路由的vue-router和实现状态管理的vuex，以及专门用于测试的vue-test-utils。如果你是一位熟练运用JavaScript、HTML和CSS的前端开发者，那么这《Vue.js快跑：构建触手可及的高性能Web应用》将向你呈现如何使用Vue来开发一个功能齐全的Web应用。
■学会Vue.js基本用法，包括使用模板语法来将数据显示在页面上。
■学会从零开始，或者使用vue-cli从模板开始创建一个Vue工程。
■学会分离代码到独立组件中，从而创建一个可维护的代码库。
■学会在Vue.js中使用CSS来为你的网站或网页应用增添样式。
■学会使用render函数和JSX代替模板语法来定制页面的呈现。
■学会使用vue-router来操控页面的路由。
■学会使用vuex来集中进行状态管理。
■学会使用单元测试来确保你的组件不出问题。
内容简介
《Vue.js快跑：构建触手可及的高性能Web应用》是用Vue.js构建Web应用的全方位指南。作者运用细致入微的讲解方式带你领略Vue.js的独特魅力，致力于协助你从零开始基于Vue.js创建一个Web应用。《Vue.js快跑：构建触手可及的高性能Web应用》共7章：第1章介绍Vue的安装及基本用法，覆盖大量Vue核心技术，诸如响应式原理、生命周期钩子等；第2章到第6章进入Vue高阶世界，通过在丰富的组件特性中遨游，教你使用vue-router和vuex来实现客户端路由和状态管理，以此完善整个Web应用的功能；最后一章介绍如何使用vue-test-utils这一官方测试利器来为组件编写单元测试，从而保证Web应用的正常运行；附录分别介绍vue-cli用法及Vue与React之间的异同。《Vue.js快跑：构建触手可及的高性能Web应用》适合对HTML和JavaScript已有一定了解，正在准备或已经使用Vue.js进行Web应用开发的从业者，也适合希望通过学习框架使用来提升对其认识的开发人员，有React使用经验的读者同样可从中获得启发。
作者简介
CallumMacrae是一位在英国伦敦就职于SamKnows的JavaScript开发工程师。SamKnows致力于让所有人都拥有更快的互联网。他热衷于将Vue与SVG相结合，并定期为开源项目做贡献，包括gulp和他自己的一些项目。关于这些，无论是GitHub还是Twitter，都能通过@callumacrae发掘到更多。
刘腾辉，资深JavaScript开发工程师。曾在豪氏威马（福建）有限公司任电气工程师，现在福建泉州环宇通信息科技股份有限公司任全栈开发工程师。
目录
前言．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．xi第1章Vue．js基础．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．1
为什么选择Vue．js．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．1
安装和设置．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．4
vue-loader和webpack．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．4
模板（Template）、数据（Data）和指令（Directive）．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．6
v-ifvsv-show．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．10
模板中的循环．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．11
属性绑定．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．13
响应式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．15
响应式如何实现．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．16
注意事项．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．17
双向数据绑定．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．19
动态设置HTML．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．21
方法．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．22
this．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．23
计算属性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．24
侦听器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．27
监听data对象中某个对象的属性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．29
获取旧值．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．29
深度监听．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．30
过滤器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．30
使用ref直接访问元素．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．33
输入和事件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．33
v-on简写．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．34
事件修饰符．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．34
生命周期钩子．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．37
自定义指令．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．38
钩子函数参数．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．40
过渡和动画．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．41
CSS过渡．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．41
JavaScript动画．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．44
总结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．46
第2章Vue．js组件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．47
组件基础．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．47
数据、方法和计算属性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．48
传递数据．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．49
Prop验证．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．50
Prop的大小写．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．51
响应式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．52
数据流和．sync修饰符．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．53
自定义输入组件与v-model．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．56
使用插槽（slot）将内容传递给组件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．57
默认内容．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．58
具名插槽．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．59
作用域插槽．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．60
自定义事件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．62
混入．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．65
混入对象和组件的合并．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．67
vue-loader和．vue文件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．68
非Prop属性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．70
组件和v-for指令．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．71
总结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．74
第3章使用Vue添加样式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．77
Class绑定．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．77
内联样式绑定．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．79
数组语法．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．80
多重值．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．80
用vue-loader实现ScopedCSS．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．81
用vue-loader实现CSSModules．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．82
预处理器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．83
总结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．83
第4章render函数和JSX．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．85
标签名称．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．86
数据对象．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．86
子节点．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．88
JSX．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．89
总结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．91
第5章使用vue-router实现客户端路由．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．93
安装．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．93
基本用法．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．94
HTML5History模式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．96
动态路由．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．97
响应路由变化．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．98
路由参数作为组件属性传入．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．100
嵌套路由．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．101
重定向和别名．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．103
链接导航．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．104
tag属性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．105
active-class属性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．106
原生事件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．107
编程式导航．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．107
导航守卫．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．108
路由独享守卫．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．110
组件内部守卫．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．111
路由顺序．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．112
404页面．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．113
路由命名．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．114
总结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．115
第6章使用vuex实现状态管理．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．117
安装．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．118
概念．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．119
State及其辅助函数．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．121
State辅助函数．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．122
Getter．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．124
Getter辅助函数．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．126
Mutation．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．126
Mutation辅助函数．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．128
Mutation必须是同步函数．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．128
Action．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．129
Action辅助函数．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．130
参数解构．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．131
Promise与Action．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．131
Module．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．132
文件结构．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．134
带命名空间的模块．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．135
总结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．137
第7章对Vue组件进行测试．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．139
测试单个组件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．139
介绍vue-test-utils．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．141
查询DOM．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．142
挂载选项．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．143
模拟和存根数据．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．145
测试事件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．146
总结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．148
附录A搭建Vue开发环境．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．149
附录BVue与React．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．153
索引．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．171
前言/序言
译者序
在掘金网站上的一篇名为《我为什么要立刻放弃React而使用Vue？》的译文中，评论里有人说道：“面试过一些前端，10个9个培训的vue，基础一问三不知，而培react的几乎没有”。我认为，基础修行在个人，这当然可以归功于React，但却没有理由怪罪Vue。相反，这种现象恰恰展现了Vue的优势——上手极快。我想，这大概是我们在这个快速迭代的时代里，选择Vue的一个潜在原因，它能我们快速体验到成功开发一个可用应用的快感，并借着这份快感，进一步深入，最终迭代出一个满意的应用。这就像大学里学C语言，如果一开始不是教找素数这么枯燥的程序，而是从一个简单的贪吃蛇游戏入手，会不会我们学习语言的积极性会更高呢？当然，前提是Vue的性能可以和react、angular等前端框架比肩，上手极快才有意义。关于性能方面的比较，可以查阅官方说明（https://cn.vuejs.org/v2/guide/comparison.html）。
对于现代化前端开发体系，MVVM框架无疑已经成为其中必不可少的一环。当下主流框架中，React、Angular、Vue三足鼎立，我们和《Vue.js快跑：构建触手可及的高性能Web应用》的原作者一样，在经过对它们的了解和实践以后，最终都惊叹于Vue简单而不失优雅的开发风格。如果没有深厚的编程功底以及设计能力，想要优雅地使用React会存在一些障碍；而对于Angular来说，对于个人开发者和中小型的应用又略显得“重”了，学习曲线也比较陡峭。但Vue对于个人开发者和中小型应用更友好，学习曲线也是渐进性的，非常适合用来入门和学习MVVM框架中所涉及的通用知识和开发理念。
说到底，JavaScript是一门特殊的语言，自诞生二十几年来，不断被赋予更多的责任，谓之为移动互联网浪潮的支柱之一不足为过。而在前端开发领域中，从jQuery的插件化开发，到模块化和组件化；从刀耕火种的“蛮荒时代”，到愈加完善的工程化时代；前端开发的质量和效率有了飞跃式的提升，对前端开发从业者的职业素养要求也不断提高。
时至今日，Angular、React和Vue三大框架覆盖了前端开发的大部分场景，其配套生态在社区的支持下不断完善，为前端开发带来极大的帮助。在享受其便利之时，我们更要去深入掌握其背后的语言基础，并思考如果提升和进步，才可能在下一个浪潮中成为时代的弄潮儿。希望这本指南能为将来弄潮儿的你起到些许推波助澜的作用。
最后，非常高兴能形成一个团队共同完成《Vue.js快跑：构建触手可及的高性能Web应用》的翻译工作，一起经历了一段默契的时光。在翻译工作过程中，我们往往会发现，作为一名前端开发，自认为对Vue是有所了解的，但仍然时不时会在书中发现一些不曾注意到的用法，这实在让人很是开心。此外，原作的内容往往通俗易懂，但翻译时，有时候就难免生涩，需要不断推敲用词、组织语句；好在，团队成员彼此都非常热心，互相给出了很多有益的意见，并且形成了相互纠正错误的良好氛围，这些都让翻译成果变得更好。在此，感谢团队的付出，感谢所有支持和帮忙《Vue.js快跑：构建触手可及的高性能Web应用》翻译的老师和编辑们。如果在翻译方面有错误和不足的地方，恳请读者批评指正。
前言
前端开发领域一直在改变。网站变得越来越丰富，交互性也越来越强，作为前端开发者，我们需要不断增加复杂的功能和使用更加强大的工具。使用jQuery在某个页面中更改一部分文本很简单，但我们要做的事可不止这些——比如更新页面中大量具有交互性的部分、处理复杂的状态、使用客户端路由、高效简洁地编写和组织代码——在这种情况下，使用JavaScript框架会让我们的工作变得更加轻松。
框架是一种JavaScript工具，它使开发者能够更容易地创建丰富而又具有交互性的网站。框架所包含的功能使我们能够创建一个功能完备的Web应用程序，包括操作复杂的数据并将其显示在页面上、处理客户端路由而不是依赖服务端、有时甚至允许我们只需访问服务器一次并完成初始下载就能构建一个完整的网站。Vue.js是一款近来十分流行的JavaScript框架，同时它的普及性还在扩大。当时还在Google工作的EvanYou在2014年编写并发布了Vue.js的第一版。在写《Vue.js快跑：构建触手可及的高性能Web应用》时，Vue.js在GitHub上已经拥有超过75000个星标，这使得它成为GitHub上受关注度排名第八位的代码仓库，同时这个数量还在迅速上涨。Vue拥有上百位合作者，它在npm上每天约有40000次的下载量。它包含在开发网站和应用程序时非常有用的功能：一种功能强大、能够创建DOM和监听事件的模板语法，无须操心数据变化带来相应模板更新的响应式原理以及使维护数据变得更容易的功能。
适合读者
如果你已经对HTML和JavaScript有一定了解，并希望通过学习如何使用框架来提升对它们的认识，则这《Vue.js快跑：构建触手可及的高性能Web应用》是为你而准备的。你没有必要精通JavaScript，但是我在代码示例中没有解释任何有关Vue.js功能以外的JavaScript代码，所以了解一些JavaScript的基础知识将会很有帮助。代码示例也使用JavaScript的最新规范ECMAScript2015进行编写，因此其中会包含诸如常量、箭头函数和解构等新的语言特性。如果你对ES2015不熟悉，不要担心——有大量高质量的文章和资源能够帮助你，同时示例代码也拥有很好的可读性。
如果你有使用React的经验，这《Vue.js快跑：构建触手可及的高性能Web应用》仍然适合你，但花一些时间查看附录B是值得的，其中解释了Vue.js中涉及的一些概念，并与你在React中已经了解的内容做了比较。
各章简介
《Vue.js快跑：构建触手可及的高性能Web应用》包含7章和两个附录。
第1章Vue.js基础
本章介绍Vue.js的基础知识和核心技术。阐述如何安装并将Vue.js引入网页，以及如何使用它在页面上展示数据。
第2章Vue.js组件
Vue.js允许并鼓励你将代码拆分为多个可在代码库中复用的组件。这一章将详细阐述如何创建一个易于维护和理解的代码库。
第3章使用Vue添加样式
《Vue.js快跑：构建触手可及的高性能Web应用》中的每一部分都会涉及HTML和JavaScript，但在这一章中，将介绍更多在创建网站中关于视图层的内容。将阐述如何在Vue中使用CSS来定制化网站和应用，以及使用内置的辅助函数来协助你完成这项工作。
第4章render函数和JSX
如果你看过了很多Vue代码或已经阅读完入门指南，就会熟知模板语法，但除了这个，Vue还支持自定义渲染函数，它允许你使用JSX语法——一种React用户熟悉的语法。在本章中还将阐述如何在Vue中使用JSX语法。
第5章使用vue-router实现客户端路由
Vue本身只是一个视图层。要创建一个具有多个页面且无须新的额外请求即可访问的应用程序（或者用专业的说法：单页应用），需要将vue-router添加到网站中，可以使用它来处理客户端路由——比如说请求指定的路径时，代码如何执行和展示数据。这一章将阐述如何做到这一点。
第6章使用vuex实现状态管理
在一个具有多级组件层级、更加复杂的应用中，在组件中传递数据会变得有些棘手。Vuex使你能够在一个集中的空间里处理应用的状态，本章将阐述如何使用它来轻松处理复杂应用的状态。
第7章对Vue组件进行测试
到此，已经学习到了能够使网站正常运作所需要了解的一切，但是如果需要在未来继续维护网站，你应该为它编写测试。这一章将介绍如何使用vue-test-utils来为组件编写单元测试以确保它们在未来的运行中不会出现问题。
附录A搭建Vue开发环境
vue-cli使你能够从给定的模板中，快速构建Vue应用，本附录向你展示它是如何工作的以及它提供的一些模板。
附录BVue与React
如果你拥有使用React的经验，那么可能已经很熟悉Vue中的诸多概念。本附录重点介绍Vue和React之间的异同点。
