Vue.js 2.0 漸進開發應用實踐
內容
導讀：為什麼要用 Vue.js
使用任何新框架和庫其實都是為了解決我們當前開發所遇到的問題，或者能提升其開發效率。每個人的成本就是時間，好的工具則能夠幫助我們節約時間，從項目角度而言，也就幫我們節約了成本。而 Vue.js 就是一款能降低開發成本、提升開發效率的工具，它能幫助我們從繁瑣的 DOM 操作中解脫出來。開發中，我們設定好正確視圖和數據的規則後，只需要關注數據的變化，視圖上的內容是會隨之變化的，而不需要我們手動再操作 DOM 元素進行修改。
此外，前端開發的模式也逐漸開始往組件化方向轉變，Web Components 的概念也開始逐漸成為標準，擁有自己獨立的 HTML 片段、JS 文件以及 CSS 樣式，這樣在使用時可以不用擔心對自己本身業務上的代碼造成影響。Vue.js 對這一概念也進行了自己的實現，這樣對於提升代碼復用、拆解大型項目，都有著很好的幫助。
兼容性
Vue.js 不支持 IE8 及其以下版本，因為 Vue.js 使用了 IE8 不能模擬的 ECMAScript 5 特性。Vue.js 支持所有兼容 ECMAScript 5 的瀏覽器。
內容列表
本系列將從零開始介紹 Vue.js，內容安排如下：
- Vue 的基礎概念及構建開發環境
- 網頁開發的基礎內容：數據渲染、事件綁定和表單處理
- 提升代碼復用性（1）：指令和組件
- 提升代碼復用性（2）：混合屬性、過濾器、過渡和插件
- 開發線上項目必經過程：前後端聯調及打包發布
- 數據請求、文件上傳、解決跨域問題
- 第三方庫與業務代碼分離、多頁面分離資源引用
- 單頁應用的基礎：vue-router
- 路由聲明及使用
- 利用導航守衛實現許可權控制
- 路由優化：解耦與按需載入
- 組件間通信及構建大型應用所需的狀態管理：Vuex
- Vuex 的基本用法
- Vuex 的常見使用技巧
- 實戰：日曆式的 TODO List
- 提升 SEO 和加快首屏顯示時間：服務端渲染
- 預渲染
- 服務端渲染官方庫：vue-server-renderer
- 服務端渲染框架：Nuxt.js
- 編寫高質量的 Vue 項目：測試用例
- Karam + Mocha：單元測試
- Nightwatch：E2E 測試
期望能使幫助開發者快速掌握 Vue.js，了解其使用方式和使用場景，並構建可上線的真實項目。
適合閱讀人群
本系列的文章適合以下人群閱讀：
- 對 Vue.js 感興趣但尚未使用的前端開發者；
- 對 Vue.js 處於實驗階段但尚未正式上線或使用規模還不大的開發者。
版本約定
本系列內容採用 Vue.js 版本為 2.5.6，大部分代碼都會使用 ES6，希望讀者對 ES6 有一定的了解。
第01課：Vue 的基礎概念及構建開發環境
數據與視圖
Vue.js 最大的特點之一就是數據驅動視圖，也就是說當數據發生變化時，視圖（即用戶界面）也隨之發生變化，而不需要我們手動去更新 DOM 元素。
上圖中的視圖很好理解，就是我們開發的用戶頁面，即 DOM 元素；模型則為在這個頁面上包含的數據以及業務邏輯，即 JavaScript 對象；而視圖模型就是將這兩者聯繫起來的方式，也就是通過 Vue.js 來編寫的內容。
組件
組件是 Vue.js 中的重要概念，大部分的應用界面都可以被抽象成組件或多個組件的組合。簡單來講，組件就是一段封裝好的、擁有自己獨立 HTML 模板、CSS 樣式和 JS 的代碼段，且被使用的時候不會影響頁面上的其他代碼。而在 Vue.js 中，可以這麼去理解組件：
- 自定義的標籤名；
- 獨立的 HTML 模板和 CSS 樣式；
- 獨立的作用域，即包含自己的數據業務模型，也就是 Vue.js 實例。
如果說前端之前考慮的都是如何開發「頁面」，那在使用 Vue.js 的過程，我們需要把「頁面」這一個略顯龐大、多樣的概念逐漸轉變成高內聚、單一功能的「組件」概念，而頁面則變成了多個單一功能組件疊加後的結果。
Vue.js 的 Hello world
按照慣例，我們還是先會使用 Vue.js 來構建一個 Hello World 的頁面。
首先是引用方式，可以直接在 HTML 插入 script 標籤，像引用任何一個簡單的 JS 文件一樣。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
引入後得到了一個全局 Vue 的對象，可以直接用 new 的方式新建一個 Vue 的實例：
var vm = new Vue({ ... })
然後下一步就是如何與 DOM 元素建立聯繫，並且渲染內容了。
<html> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var vm = new Vue({ el: "#app", data: { message: "Hello World!" } }) </script></html>
如圖所示，我們得到了一個理所當然的 Hello World!
從上面這個例子可以看到幾個具體的用法：
el
選項為一個元素選擇器，標明了當前 vue 實例所掛載的根元素，也就是確定了 vue 實例影響的範圍，在這個元素之外的 DOM 元素不受當前 vue 實例。data
則是一個對象，聲明了當前實例的數據（也就是 Model 層面的內容）。
- 在 HTML 中，使用雙大括弧{{ }}來標明這一部分內容是需要被實例中的數據重新渲染的。我們稱之為
聲明式渲染（Declarative Rendering）
。
當然，如果 Vue.js 僅僅做了這一次數據渲染的工作，那就變成了前端模板引擎，而不是什麼 mvvm 框架了。
那如何體現 Vue.js 的數據驅動視圖的特點呢？我們可以手動調用上例中的 vm，修改 vm 中的 message 數據（可以在瀏覽器的 console 裡面直接修改）。
vm.message = "Hello GitChat"
可以看到 #app 元素中渲染的內容就變成了「Hello GitChat」，而在這個過程中，我們沒有手動去獲取並修改 DOM 值，這一操作就完全交由 Vue 來實現了，我們只是事先聲明好了渲染規則，也就是建立了數據與視圖的綁定。
Vue 實例和選項
Vue 的實例就是通過 new Vue() 的方式建立的，每個 Vue 的應用也都是由此開始的。
在創建 Vue 實例的時候，我們可以傳入一個選項對象，大致包含以下幾種，這裡先簡單介紹一下。
與視圖、模板相關的
- el：提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標。可以是 CSS 選擇器，也可以是一個 HTMLElement 實例，只在由 new 創建的實例中遵守。
- template：一個字元串模板。
- render：渲染函數，接收createElement方法來創建VNode。
與數據、業務邏輯相關的
- data：實例的數據對象。
- methods：實例方法，可用於監聽 DOM 事件。
- props：作為組件時，接收到外部傳遞進來的參數。
- computed：計算屬性。
- watch：觀察模式，監聽數據的變化並執行對應的函數。
生命周期相關鉤子函數
- beforeCreate()
- created()
- beforeMount()
- mouted()
- ……
其他
- components：需要使用的其他 Vue 組件對象。
- mixins：混合對象。
這裡沒有必要一下子全部記住或理解，這些選項的使用方式和規則都會逐漸貫穿在整個課程當中，在使用時會逐一詳細解釋。
實例生命周期
Vue 實例在被創建之前有一系列的初始化過程。例如，設置數據監聽、編譯模板並掛載到指定 DOM 元素上、綁定事件等，而在實例被銷毀後也需要進行取消監聽、移除元素等操作。這一個從開始到結束的過程稱之為實例的生命周期，而在整個過程中，Vue.js 會在特定的時機運行特定的函數，並允許用戶將自己的業務代碼傳遞進來，這些函數被稱之為生命周期鉤子函數（Lifecycle Hooks）。
這是 官網 給出生命周期圖，具體所包含生命周期包括 create（創建）、mount（掛載）、update（更新）、destory（銷毀）階段還有一個activated（激活）階段（需要包裹在 < keep-alive> 標籤下才會觸發）。
下面來看下這些階段所包含的鉤子函數和使用區別：
- beforeCreate：最先被調用，此時實例已經創建，但尚未綁定數據，進行數據監聽。
- created：此時已建立數據監聽，與 beforeCreate 最大的區別在於，此時在函數內可以通過 this 來訪問到 data 對象中的數據。
- beforeMount：在 created 之後調用，但此時尚未掛載，所以實例的模板還並不存在當前的 HTML 文檔中，無法獲取 DOM。
- mounted：真實掛載到 HTML 文檔中，可以獲取 DOM 值。
- beforeUpdate：數據更新前觸發，可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。
- updated：由數據更改導致的虛擬 DOM 重新渲染後調用該函數。
- beforeDestory：實例銷毀之前調用，在此函數內，this 實例仍然完全可用。
- destroyed：實例徹底被銷毀，並解綁之前的所有數據和事件。
- activated：當組件被 < keep-alive> 包裹並激活時調用。
- deactivated：與 activated 相對應，當組件被停用時調用，被 < keep-alive> 包裹的組件並不會直接被銷毀，雖然從視覺上是被移除了，但並不會調用 beforeDestory 和 destroyed 函數，下次被激活時組件也同樣不觸發 beforeCreate 和 created 函數。
具體效果及運行順序可以參考該 示例。
使用 Vue-cli 構建開發環境
剛開始的時候，我們經常會糾結於如何設置目錄結構，特別是在多人開發構建大型項目的時候，如果目錄沒有一個清晰的描述和規劃往往會導致項目的混亂和衝突。Vue.js 提供了一個官方的命令行工具 Vue-cli，能幫助我們快速構建單頁應用結構，並提供許多方便開發的功能：
- 熱重載，無需手動刷新頁面即可看到修改效果。
- 預處理器，可以使用 ES6 或 SASS/LESS 等不能直接在瀏覽器中使用的語言開發，將其編譯成可執行的 JS 或 CSS。
- 支持與 eslint 代碼風格檢查，能保證團隊代碼風格一致。
- 打包發布，將業務代碼合併壓縮成單個 CSS 和 JS 文件，減少 HTTP 請求。
- 代理請求，方便前後端分離的項目，本地可直接請求其他遠程伺服器上的後端介面服務。
那如何來安裝和使用 vue-cli 呢？非常方便，首先需要安裝 Node 和 NPM 環境，可以訪問 官網 直接下載對應操作系統的安裝包進行安裝。
安裝成功之後，通過命令行安裝 vue-clic：
npm install -g vue-cli
這樣我們就可以全局使用 vue-cli 命令行了。vue-cli 支持以下 6 種模式的腳手架：
- Webpack：使用 Webpack 作為構建工具，而且包含了熱更新、代碼檢查、測試等配套工具的安裝。
- webpack-simple：簡化的 Webpack 版，僅包含了 vue-loader。
- browserify：與 Webpack 型腳手架功能類似，但用 browserify 替換掉 Webpack。
- browserify-simple：同 webpack-simple。
- pwa：pwa（progressive web app）漸進式網頁應用模板，基於 Webpack 構建。
- simple：最簡單的模板，一個 HTML 引用了 Vue.js。
我們可以使用以下命令行來選擇腳手架進行安裝：
vue init <template-name>(上面6種名稱任選其一) <project-name>(新建的項目名)
以 Webpack 為例：
我們可以依次輸入項目名稱、描述、作者等描述信息，然後也可以選擇所需要的功能，如路由、ESlint、單元測試、E2E 測試等。
生成的目錄結構如下：
- build：Webpack 相關的配置文件，包含熱載入、編譯、代碼風格檢查等
- config：基礎配置文件，包括設置代理服務，打包後的文件路徑、文件名等
- src：業務代碼目錄
- assets 資源文件
- components 組件文件
- router 前端路由
- App.vue 根組件
- main.js 入口文件、引入根組件、創建 Vue 實例
- static：靜態資源文件目錄
- test：測試文件目錄
- index.html：HTML 文件模板，也就是 Vue.js 掛載的模板
然後我們就可以根據上圖的提示，進入文件目錄，安裝依賴並運行項目
npm insall
npm run dev
Webpack 在此的作用是將可以分析項目結構，根據依賴，載入對應的模塊，並對指定的模塊（如 ES6 編寫的 JS，SCSS 編寫的 CSS）進行編譯，使之能在瀏覽器中正常運行。
只要使用合適的 Loader，Webpack 就可以將所有文件都當做模塊來進行處理，輸出你想要的結果。而在此將使用Vue-loader（Vue-cli 已在 Webpack 腳手架中已配置好）使得項目的開發更清晰，更符合組件化的特點。
所以我們在該腳手架中看到的 App.vue 的寫法會是：
這和首個 Hello World 的例子看起來並不一樣，在 .vue 文件中，HTML、JS 和 CSS 分別被包含在 template、script、style 標籤中，這和我們之前說的組件化相當契合，獨立的模板和樣式，以及 JS 代碼。當然，這樣的寫法直接放到瀏覽器中當然是無法運行的，所以在此配置了 Webpack + Vue-loader，可以將這樣寫法的代碼編譯成瀏覽器可執行的 HTML、JS 和 CSS 代碼。
小結
以上大致介紹了 Vue.js 中的數據綁定和組件化兩大重要概念，實現了第一個 Vue.js 的 Hello World。Vue.js 可以接受一個選項對象，創建實例，每個實例包含自己的生命周期。在編寫大型項目的時候，我們往往會使用 vue-cli 來構建項目，並且通過 Webpack 和 Vue-loader 可以用組件化的方式來開發 Vue.js 項目。
※svn 下載 github 上的單個目錄或文件
※int 和 Integer 有什麼區別？談談 Integer 的值緩存範圍
TAG:程序員小新人學習 |