Vue.js 2.0 快速上手精華梳理

Sandy 發掘代碼技巧：公眾號:daimajiqiao 自從Vue2.0發布后，Vue就成了前端領域的熱門話題，github也突破了三萬的star，那么對于新手來說，如何高效快速的學習Vue2.0呢。

Vue基礎

對于沒有接觸過es6和webpack的童鞋來說，不建議直接用官方的腳手架vue-cli構件項目。
先按文檔順序最少學習完組件那一章。直接在html文件中引入vue.js開始學習,了解vue的基礎指令，和整個vue實例的基礎架構。
vue的生命周期很重要，了解這點以后可以免去很多問題。
學完這些可以做一些練手的小項目，比如萬年不變的todolist。。。
現在可以開始學習使用vue-cli構件項目了，學習組件化之前，推薦先看一下es6關于模塊的介紹。阮一峰《ECMAScript6》 Module
光會這些還是不夠的，還得會一些npm基礎，知道如何用git-bush來安裝模塊依賴，會一些常用的命令。這方面的知識可以參閱npm入門文檔
看完這些就可以試著將之前的寫的demo用搭建的vue-cli來實現。附上我寫的一個入門小demovue-demo-search
多看看組件那里，看看如何在vue-cli中怎么實現組件化。
到這里vue基礎篇就結束了。你還可以有條件的參閱剩下的官方文檔里面的進階篇，如果時間有限，就直接進入vue-router

Vue-router

和之前一樣，推薦直接用html+js過一遍文檔
對路由導航鉤子得好好看一看。
看完文檔就可以上手vue-cli，一般新手在這幾天都會死活跑不出來。偷笑
最直接的方法就是去github上搜一些關于vue-router2.0的demo，看如何構件路由，如何構件項目目錄。
我這里有一個傳送門
如果能跑出來，就可以做一些小項目了，比如寫一個知乎日報啊偷笑，這些demo在github上很多。
可以結合一些組件庫寫demo，這樣可以更加了解組件化。比如餓了么團隊的Element、mint-ui

Vuex

什么是vuex？
Vuex 是一個專門為 Vue.js 應用設計的 狀態管理模型 + 庫。它為應用內的所有組件提供集中式存儲服務，其中的規則確保狀態只能按預期方式變更。說白了就是控制應用的一些全局狀態。狀態改變了，對應的視圖也會改變。

在學習Vuex時，會有一些ES6特性，當遇到這些時，最好不要一帶而過，去好好看一看這些es6特性。
比如在學習Action時可以看看ES6新增的Promise和參數解構。
實踐的方法一樣是先看別人別人寫的代碼，比如官方的購物車實例的應用結構
把之前寫的demo優化一下，有些地方可以用用vuex
vuex主要是用來對不同組件間進行通信，它構建了一個Vue實例的全局數據與方法，這些數據與方法可以在該Vue實例的所有組件中get與set

入門到放棄整理

一、vue基礎

Vue2.0最全文檔 Vue2.0

探索之路——vue-router入門教程和總結

Vue.js 2.0 快速上手

Vuejs2.0 文檔攻略

“Vue2.0”跟俺一起全面入坑 01

“Vue2.0”跟俺一起全面入坑 02

“Vue2.0”跟俺一起全面入坑 03

“Vue2.0”跟俺一起全面入坑 —— 自定義便簽

超好用的VueJs調試工具——vue-devtools

Vue2.0史上最全入坑教程（上）—— 搭建Vue腳手架（vue-cli）

Vue2.0史上最全入坑教程（中）—— 腳手架代碼詳解

Vue2.0史上最全入坑教程（下）—— 實戰案例

Vue2.0史上最全入坑教程（完）—— 實戰案例

vue-cli中配置sass和利用SASS函數功能實現px轉rem

二、vue提高

Vue路由跳轉問題記錄詳解 vuejs心法和技法

Vue2.0生命周期和鉤子函數的一些理解 ===》推薦
用webpack（2.x語法）手動搭建Vue項目

全面解析vue-cli生成的項目中使用其他庫（js庫、css庫）

Vuex從入門到熟練使用 vue與服務端通信—vue-resource

vue開發過程中跨域最簡單解決方案 富文本編輯器Ueditor如何在Vue中使用？

三、vue 1.x和vue 2.x的區別

到了Vue2.x有哪些變化？—— 知識點 到了Vue2.x有哪些變化？—— 組件通信

四、其他必備知識點

ES6入門（一） ES6快速入門（二） ES6快速入門（三）

?

?

需要視頻教程的關注公眾號[代碼技巧]（ID:daimajiqiao）回復 14 即可獲取,付出總會有收獲

Vue.js2.0核心思想

Vue.js是一個提供MVVM數據雙向綁定的庫，專注于UI層面，核心思想是：數據驅動、組件系統。

數據驅動：

Vue.js數據觀測原理在技術實現上，利用的是ES5Object.defineProperty和存儲器屬性: getter和setter（所以只兼容IE9及以上版本），可稱為基于依賴收集的觀測機制。核心是VM，即ViewModel，保證數據和視圖的一致性。

watcher：每一個指令都會有一個對應的用來觀測數據的對象，叫做watcher，比如v-text="msg", {{ msg }}，即為兩個watcher，watcher對象中包含了待渲染的關聯DOM元素。

<div id="app">{{ message }}
</div>
var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}
})

基于依賴收集的觀測機制原理：

1 將原生的數據改造成 “可觀察對象”，通常為，調用defineProperty改變data對象中數據為存儲器屬性。一個可觀察對象可以被取值getter，也可以被賦值setter。
2 在解析模板，也就是在watcher的求值過程中，每一個被取值的可觀察對象都會將當前的watcher注冊為自己的一個訂閱者，并成為當前watcher的一個依賴。
3 當一個被依賴的可觀察對象被賦值時，它會通知notify所有訂閱自己的watcher重新求值，并觸發相應的更新，即watcher對象中關聯的DOM改變渲染。
依賴收集的優點在于可以精確、主動地追蹤數據的變化，不需要手動觸發或對作用域中所有watcher都求值（angular臟檢查實現方式的缺點）。特殊的是，對于數組，需要通過包裹數組的可變方法（比如push）來監聽數組的變化。在添加/刪除屬性，或是修改數組特定位置元素時，也需要調用特定的函數，如obj.$add(key, value)才能觸發更新。這是受ES5的語言特性所限。

組件系統：

應用類UI可以看作全部是由組件樹構成的。

注冊一個組件：

Vue.component('my-component', {// 模板template: '<div>{{msg}} {{privateMsg}}</div>',// 接受參數props: {msg: String    },// 私有數據，需要在函數中返回以避免多個實例共享一個對象data: function () {return {privateMsg: 'component!'}}
})
<my-component msg="hello"></my-component>

組件的核心選項

1 模板（template）：模板聲明了數據和最終展現給用戶的DOM之間的映射關系。
2 初始數據（data）：一個組件的初始數據狀態。對于可復用的組件來說，這通常是私有的狀態。
3 接受的外部參數(props)：組件之間通過參數來進行數據的傳遞和共享。
4 方法（methods）：對數據的改動操作一般都在組件的方法內進行。
5 生命周期鉤子函數（lifecycle hooks）：一個組件會觸發多個生命周期鉤子函數，最新2.0版本對于生命周期函數名稱改動很大。
6 私有資源（assets）：Vue.js當中將用戶自定義的指令、過濾器、組件等統稱為資源。一個組件可以聲明自己的私有資源。私有資源只有該組件和它的子組件可以調用。
Webpack是一個開源的前端模塊構建工具，它提供了強大的loader API來定義對不同文件格式的預處理邏輯，這是.vue后綴單文件組件形式的基礎。所以在此基礎上，尤大開發的vue-loader允許將模板、樣式、邏輯三要素整合在同一個文件中，以.vue文件后綴形成單文件組件格式，方便項目架構和開發引用。

其他特性：

1 異步批量DOM更新：當大量數據變動時，所有受到影響的watcher會被推送到一個隊列中，并且每個watcher只會推進隊列一次。這個隊列會在進程的下一個 tick異步執行。這個機制可以避免同一個數據多次變動產生的多余DOM操作，也可以保證所有的DOM寫操作在一起執行，避免DOM讀寫切換可能導致的layout。
2 動畫系統：Vue.js提供了簡單卻強大的動畫系統，當一個元素的可見性變化時，用戶不僅可以很簡單地定義對應的CSS Transition或Animation效果，還可以利用豐富的JavaScript鉤子函數進行更底層的動畫處理。
3 可擴展性：除了自定義指令、過濾器和組件，Vue.js還提供了靈活的mixin機制，讓用戶可以在多個組件中復用共同的特性。

?

?

Node與Angular與Vue.js視頻教程需要視頻教程的關注公眾號[代碼技巧]（ID:daimajiqiao）回復 14 即可獲取,付出總會有收獲

最后建議Vue 2.0 的學習順序

起步

1. 扎實的 JavaScript / HTML / CSS 基本功。這是前置條件。
2. 通讀官方教程 (guide) 的基礎篇。不要用任何構建工具，就只用最簡單的 script，把教程里的例子模仿一遍，理解用法。不推薦上來就直接用 vue-cli 構建項目，尤其是如果沒有 Node/Webpack 基礎。
3. 照著官網上的示例，自己想一些類似的例子，模仿著實現來練手，加深理解。
4. 閱讀官方教程進階篇的前半部分，到『自定義指令 (Custom Directive) 』為止。著重理解 Vue 的響應式機制和組件生命周期。『渲染函數（Render Function)』如果理解吃力可以先跳過。
5. 閱讀教程里關于路由和狀態管理的章節，然后根據需要學習 vue-router 和 vuex。同樣的，先不要管構建工具，以跟著文檔里的例子理解用法為主。
6. 走完基礎文檔后，如果你對于基于 Node 的前端工程化不熟悉，就需要補課了。下面這些嚴格來說并不是 Vue 本身的內容，也不涵蓋所有的前端工程化知識，但對于大型的 Vue 工程是前置條件，也是合格的『前端工程師』應當具備的知識。

前端生態/工程化

1. 了解 JavaScript 背后的規范，ECMAScript 的歷史和目前的規范制定方式。學習 ES2015/16 的新特性，理解 ES2015 modules，適當關注還未成為標準的提案。
2. 學習命令行的使用。建議用 Mac。
3. 學習 Node.js 基礎。建議使用 nvm 這樣的工具來管理機器上的 Node 版本，并且將 npm 的 registry 注冊表配置為淘寶的鏡像源。至少要了解 npm 的常用命令，npm scripts 如何使用，語義化版本號規則，CommonJS 模塊規范（了解它和 ES2015 Modules 的異同），Node 包的解析規則，以及 Node 的常用 API。應當做到可以自己寫一些基本的命令行程序。注意最新版本的 Node (6+) 已經支持絕大部分 ES2015 的特性，可以借此鞏固 ES2015。
4. 了解如何使用 / 配置 Babel 來將 ES2015 編譯到 ES5 用于瀏覽器環境。
5. 學習 Webpack。Webpack 是一個極其強大同時也復雜的工具，作為起步，理解它的『一切皆模塊』的思想，并基本了解其常用配置選項和 loader 的概念/使用方法即可，比如如何搭配 Webpack 使用 Babel。學習 Webpack 的一個挑戰在于其本身文檔的混亂，建議多搜索搜索，應該還是有質量不錯的第三方教程的。英文好的建議閱讀 Webpack 2.0 的文檔，比起 1.0 有極大的改善，但需要注意和 1.0 的不兼容之處。

Vue 進階

1. 有了 Node 和 Webpack 的基礎，可以通過 vue-cli 來搭建基于 Webpack ，并且支持單文件組件的項目了。建議用 webpack-simple 這個模板開始，并閱讀官方教程進階篇剩余的內容以及 vue-loader 的文檔，了解一些進階配置。有興趣的可以自己親手從零開始搭一個項目加深理解。
2. 根據 例子 嘗試在 Webpack 模板基礎上整合 vue-router 和 vuex
3. 深入理解 Virtual DOM 和『渲染函數 (Render Functions)』這一章節（可選擇性使用 JSX)，理解模板和渲染函數之間的對應關系，了解其使用方法和適用場景。
4. （可選）根據需求，了解服務端渲染的使用（需要配合 Node 服務器開發的知識）。其實更重要的是理解它所解決的問題并搞清楚你是否需要它。
5. 閱讀開源的 Vue 應用、組件、插件源碼，自己嘗試編寫開源的 Vue 組件、插件。

轉載于:https://www.cnblogs.com/u0mo5/p/8997058.html

總結

以上是生活随笔為你收集整理的【转】Vue.js 2.0 快速上手精华梳理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。