Vue.js快跑：構建觸手可及的高性能Web應用（簡體書）

本書是用Vue.js構建Web應用的全方位指南。作者運用細緻入微的講解方式帶你領略Vue.js的獨特魅力，致力於協助你從零開始基於Vue.js創建一個Web應用。本書共7章：第1章介紹Vue的安裝及基本用法，覆蓋大量Vue核心技術，諸如響應式原理、生命週期鉤子等；第2章到第6章進入Vue高階世界，通過在豐富的組件特性中遨遊，教你使用vue-router和vuex來實現客戶端路由和狀態管理，以此完善整個Web應用的功能；最後一章介紹如何使用vue-test-utils這一官方測試利器來為組件編寫單元測試，從而保證Web應用的正常運行；附錄分別介紹vue-cli用法及Vue 與React之間的異同。本書適合對HTML和JavaScript已有一定瞭解，正在準備或已經使用Vue.js進行Web應用開發的從業者，也適合希望通過學習框架使用來提升對其認識的開發人員，有React使用經驗的讀者同樣可從中獲得啟發。

譯者序
在掘金網站上的一篇名為《我為什麼要立刻放棄 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 簡單而不失優雅的開發風格。如果沒有深厚的編程功底以及設計能力，想要優雅地使用 React 會存在一些障礙 ；而對於 Angular 來說，對於個人開發者和中小型的應用又略顯得“重”了，學習曲線也比較陡峭。但 Vue 對於個人開發者和中小型應用更友好，學習曲線也是漸進性的，非常適合用來入門和學習 MVVM框架中所涉及的通用知識和開發理念。
說到底，JavaScript 是一門特殊的語言，自誕生二十幾年來，不斷被賦予更多的責任，謂之為移動互聯網浪潮的支柱之一不足為過。而在前端開發領域中，從 jQuery 的插件化開發，到模塊化和組件化 ；從刀耕火種的“蠻荒時代”，到愈加完善的工程化時代 ；前端開發的質量和效率有了飛躍式的提升，對前端開發從業者的職業素養要求也不斷提高。
時至今日，Angular、React 和 Vue 三大框架覆蓋了前端開發的大部分場景，其配套生態在社區的支持下不斷完善，為前端開發帶來極大的幫助。在享受其便利之時，我們更要去深入掌握其背後的語言基礎，並思考如果提升和進步，才可能在下一個浪潮中成為時代的弄潮兒。希望這本指南能為將來弄潮兒的你起到些許推波助瀾的作用。
最後，非常高興能形成一個團隊共同完成本書的翻譯工作，一起經歷了一段默契的時光。在翻譯工作過程中，我們往往會發現，作為一名前端開發，自認為對 Vue 是有所瞭解的，但仍然時不時會在書中發現一些不曾注意到的用法，這實在讓人很是開心。此外，原作的內容往往通俗易懂，但翻譯時，有時候就難免生澀，需要不斷推敲用詞、組織語句 ；好在，團隊成員彼此都非常熱心，互相給出了很多有益的意見，並且形成了相互糾正錯誤的良好氛圍，這些都讓翻譯成果變得更好。在此，感謝團隊的付出，感謝所有支持和幫忙本書翻譯的老師和編輯們。如果在翻譯方面有錯誤和不足的地方，懇請讀者批評指正。

前言
前端開發領域一直在改變。網站變得越來越豐富，交互性也越來越強，作為前端開發者，我們需要不斷增加複雜的功能和使用更加強大的工具。使用 jQuery 在某個頁面中更改一部分文本很簡單，但我們要做的事可不止這些――比如更新頁面中大量具有交互性的部分、處理複雜的狀態、使用客戶端路由、高效簡潔地編寫和組織代碼――在這種情況下，使用 JavaScript 框架會讓我們的工作變得更加輕鬆。
框架是一種 JavaScript 工具，它使開發者能夠更容易地創建豐富而又具有交互性的網站。框架所包含的功能使我們能夠創建一個功能完備的 Web 應用程序，包括操作複雜的數據並將其顯示在頁面上、處理客戶端路由而不是依賴服務端、有時甚至允許我們只需訪問服務器一次並完成初始下載就能構建一個完整的網站。Vue.js 是一款近來十分流行的JavaScript 框架，同時它的普及性還在擴大。當時還在 Google 工作的 Evan You 在 2014年編寫並發佈了 Vue.js 的第一版。在寫本書時，Vue.js 在 GitHub 上已經擁有超過 75000個星標，這使得它成為 GitHub 上受關注度排名第八位的代碼倉庫，同時這個數量還在迅速上漲 。Vue 擁有上百位合作者，它在 npm 上 每天約有 40000 次的下載量。它包含在開發網站和應用程序時非常有用的功能 ：一種功能強大、能夠創建 DOM 和監聽事件的模板語法，無須操心數據變化帶來相應模板更新的響應式原理以及使維護數據變得更容易的功能。
適合讀者
如果你已經對 HTML 和 JavaScript 有一定瞭解，並希望通過學習如何使用框架來提升對它們的認識，則這本書是為你而準備的。你沒有必要精通 JavaScript，但是我在代碼示例中沒有解釋任何有關 Vue.js 功能以外的 JavaScript 代碼，所以瞭解一些 JavaScript 的基礎知識將會很有幫助。代碼示例也使用 JavaScript 的最新規範 ECMAScript 2015 進行編寫，因此其中會包含諸如常量、箭頭函數和解構等新的語言特性。如果你對 ES2015不熟悉，不要擔心――有大量高質量的文章和資源能夠幫助你 ，同時示例代碼也擁有很好的可讀性。
如果你有使用 React 的經驗，這本書仍然適合你，但花一些時間查看附錄 B 是值得的，其中解釋了 Vue.js 中涉及的一些概念，並與你在 React 中已經瞭解的內容做了比較。
各章簡介
本書包含 7 章和兩個附錄。
第 1 章 Vue.js 基礎
本章介紹 Vue.js 的基礎知識和核心技術。闡述如何安裝並將 Vue.js 引入網頁，以及如何使用它在頁面上展示數據。
第 2 章 Vue.js 組件
Vue.js 允許並鼓勵你將代碼拆分為多個可在代碼庫中複用的組件。這一章將詳細闡述如何創建一個易於維護和理解的代碼庫。
第 3 章 使用 Vue 添加樣式
本書中的每一部分都會涉及 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 應用，本附錄向你展示它是如何工作的以及它提供的一些模板。
附錄 B Vue 與 React
如果你擁有使用 React 的經驗，那麼可能已經很熟悉 Vue 中的諸多概念。本附錄重點介紹 Vue 和 React 之間的異同點。

前言 .............................................................................................xi
第 1 章 Vue.js 基礎 .......................................................................1
為什麼選擇 Vue.js ..................................................................................................1
安裝和設置 ............................................................................................................4
vue-loader 和 webpack .....................................................................................4
模板（Template）、數據（Data）和指令（Directive）...........................................6
v-if vs v-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 驗