# 前言
# 為什麼要寫這本書
說起 Vue.js，我接觸它的時間不算太長，大約是從 2015 年左右開始的，幸好 Vue.js 發展的時間至今也不算太長。
當時工作上主要使用的前端技術，仍大多圍繞在 jQuery 與 AngularJS (v1)。 jQuery 我想大家都很熟悉我就不多說，簡單易用是它的特性，但規模一大容易出現義大利麵式程式碼，不好維護是其一大缺點。 AngularJS 當時雖頂著 Google 的光環出道，後來卻也有版本轉換需要整包打掉重練、難以 debug ，以及執行效能等等的問題。
就在這樣的時空背景下，我開始尋找下個世代的替代方案。
後來偶然在 PHP 社群中看見朋友在談論 Vue.js，並且對它讚譽有加，於是我開始試著在小型專案試用。 與其他前端框架相比，Vue.js 有著較低的學習成本，簡單和強大的功能，並且具有很高的可擴展性和靈活性。
有著 AngularJS 應用開發經驗的我，在短時間內就可以快速上手，而且 Vue.js 也確實解決了我的需求，我們能夠在不影響開發速度的情況下滿足不斷變化的業務需求。 於是我開始向朋友們推廣這套前端框架，後來也接下了 Vue.js Taiwan 社群，幾年下來也參與過許多講座、研討會，結交了不少社群好友。
後來 Vue.js 不斷地成長，從早期只被定位在 JavaScript 的工具庫 (library)，到如今已經是個成熟且功能強大的前端框架。 雖然 Vue.js 的官方文件已經寫得相當詳細，但仍有不少朋友對 Vue 3.0 有些疑慮或誤解，這讓我覺得是時候將這幾年的開發與教學心得記錄下來， 希望有助於各位在學習、體驗 Vue.js 這套前端框架的時候，能夠少走許多岔路。
# 本書使用的版本
由於 Vue.js 官方團隊已在 2020/09/18 正式發佈 Vue 3.0 版本， 所以本書內容會以 Vue 3.0 為主， Vue.js 2.x 的部分將作為補充說明，使讀者理解版本演進之脈絡。
為了確保避免開發環境造成執行的差異，這裡列出本書所採用開發環境版本：
- Node 版本: v14.15.3 (LTS: Fermium)
- NPM 版本: 6.14.8
- Yarn 版本: 1.22.5
- Vue CLI 版本: @vue/cli 4.5.10
- Vue.js : v2.6.12 / v3.0.4
- Vuex : v4.0.0-rc.2
- Vue Router: v4.0.1
當然前端領域更迭快速，若此書於付印之時有未及更新之處，讀者亦可參考 https://book.vue.tw (opens new window) 網站，筆者會盡力即時更新最新資訊。
# 現在應該學習 Vue 2 或者 Vue 3 ?
如前所述，Vue.js 官方團隊雖然已於 2020 年下半年發佈 Vue 3.0 的正式版本，但實際上在開發時仍考量到現有的程式架構、支援環境 (尤其是惡名昭彰的 IE) 等疑慮，有些朋友或許會對 Vue 3.0 有著眾多考量而躊躇不前。
新手最常遇到的問題就是 「現在應該學習 Vue 2 或者 Vue 3」？
好消息是 Vue.js 2.x 有九成以上的語法到了 3.0 以後仍可以直接繼續使用，在學習 Vue.js 的時候，你可以將 Vue 3 視為 2.x 的增強版本，一開始直接學習 Vue.js 3.x 的新版本即可。
這是由於 Vue.js 開發團隊在盡量不變動 API 的前提下，對 Vue.js 進行了底層核心的重寫，這對 Vue 2.x 過去的幾個明顯缺點進行了重大的改進，並在此基礎上添加了一些更好用的新功能。 所以此時直接學習 Vue 3 的新版本，對多數開發者來說不會有太大的區別。
如果你未曾接觸過 Vue.js，那麼我推薦您可直接從 Vue 3 的新版本學習起即可。 即便你已是 Vue 2.x 的老手，也只需針對少數不相容的部分進行調整，即可馬上享受 Vue 3.0 新版本的好處。 此外，對於 Vue 2.x/3.x 那些不相容的部分，在本書中也會特別為讀者標註解說。
# 預計的內容
本書大致上會分成這幾個部分：
# Vue.js 基礎入門
本篇章從零開始介紹 Vue.js 的起源、基礎知識與核心內容，帶領讀者從全新或是現有的專案導入 Vue.js。
# Vue.js 的元件系統
本篇開始講解 Vue.js 的另一大特性：元件系統 (Component System)，說明為什麼要使用元件，有什麼好處，以及說明元件系統開發時會遇到的問題。
# Vue CLI 與單一元件檔
Vue.js 的元件可以被打包成一個
.vue的檔案，但由於.vue檔案並非網頁標準的一環，為了讓瀏覽器可以正確讀取，我們需要透過相關工具進行編譯，將.vue檔編譯成瀏覽器所認識的 JavaScript。 在這個章節中，除了為讀者介紹 Vue.js 開發工具的生態圈，也一一解說如何透過 Vue CLI 來為 Vue.js 專案進行建置、打包等功能。# Vue Router 與前端路由管理
作為 Vue.js 開發生態圈的一環，Vue Router 提供了前端路由的控制，使開發者得以建立單頁式應用（SPA）的可能性。 本篇將為讀者介紹單頁式應用與前後端路由的概念，以及如何利用 Vue Router 打造單頁式應用的眉眉角角。
# Vuex 與狀態管理
Vue.js 元件的狀態各自為政，當專案規模日漸擴大的時候，狀態與資料的管理就顯得十分重要。 在過去，可能會將共用的狀態往 global scope (俗稱全域變數) 丟，雖然方便但也流於隨便，更增添日後維護的困難。 本篇所介紹的 Vuex 就是為了解決這樣的問題而生。
# Code Reuse 與 Vue Composition API
Composition API 是 Vue.js 3.0 起新增的重要特性之一，主要用來提供另一種組織 Vue.js 程式碼的架構方式。 在本書的最後章節中將為各位讀者說明這個最新的 Composition API 是什麼、如何使用、為什麼要使用它？ 它解決了什麼問題？ 以及在實際開發時，使用 Composition API 需要注意的各種細節。
# 附錄
- 給進入 Vue.js 前的 ES6 必備知識
- Vue 2.x 至 3.0 的升級指南
除了最前面兩篇的 Vue.js 基礎入門與元件系統是必要知識外，其他篇章相對獨立，可依讀者的需求自行選擇閱讀。 如果你是剛入門前端或還不熟悉 ES6 語法的朋友，建議讀者可以先行翻閱附錄的【給進入 Vue.js 前的 ES6 必備知識】部分，我想對初接觸前端領域或 Vue.js 的新手會有所幫助。
# 本書不會寫的內容
在閱讀本書前，我預期你已經有 HTML、CSS、JavaScript 的基礎知識，如果對 JavaScript 基本語法不夠熟悉的話， 這裏建議可以先閱讀 0 陷阱！0 誤解！8 天重新認識 JavaScript！ (opens new window) 一書， 或是我在 iT 邦幫忙鐵人賽的 重新認識 JavaScript 系列文 (opens new window) 會更快進入狀況。
雖然 Vue 3.0 底層核心由 TypeScript 所改寫，但仍可以使用 JavaScript 來進行開發，所以為了不增加讀者額外學習負擔，書中範例仍會以 JavaScript (ES6+) 進行解說。
另外，本書對於 HTML、CSS、JavaScript 的基礎語法並不會詳細多談，因前端涵蓋範圍廣大，必須有所取捨。 也許內容會稍微提到其他前端工具 (如 jQuery、React、Angular 等)，但主要是希望藉由引用其他框架/工具的概念來幫助讀者理解 Vue.js ，非本書主要內容，望請各位讀者理解。
那些會寫的、不會寫的內容，我在一開始都告訴你了，如果你還願意繼續往下看，那麼很高興我有這個榮幸，能與各位讀者重新認識 Vue.js 😃
Kuro.
# 聯絡我
你好，我是 Kuro Hsu，本書的作者。
通常我會出沒在
- Facebook: fb.me/kurotanshi
- Twitter: @kurotanshi
因為 SNS 上可能會阻擋陌生訊息，所以你也可以透過 email - kurotanshi [at] gmail.com 找到我 😃