SegmentFault 技術週刊 Vol.14 - 進階 Vue 2.0

在今年 8 月剛開始製做週刊時，咱們選擇了 Vue.js 做爲第一期的主題（技術週刊 Vol.1 - Vue.js 起手式），是由於注意到了它飛速的發展，當時作了這樣的統計

2014 年 3 月，Vue.js 0.10 發佈，10 月開始逐漸被大範圍發現使用，12 月 SegmentFault 社區內出現第一篇關於 Vue.js 的文章，2015 年 1 月首次有人就 Vue 相關的使用開始提問。

至今，社區內已有 900 多個 vue.js 相關的問題，300 多篇相關的文章。

而到如今，距離上次統計過去僅三個半月，咱們獲得的新數據是

截至今天，SegmentFault 社區內已有 1700 多個 vue.js 相關的問題，500 多篇相關的文章。

單從數據就能夠看出 Vue.js 火熱的增加趨勢，因此，咱們今天給你們帶來 Vue 的內容特輯第二期 - 《進階 Vue 2.0》，做爲 SegmentFault 技術週刊的第 14 期主題。本期，將重點放在 Vuex、Vue.js 2.0 以及相關的應用實踐。

進階 2.0

Vue 做者尤雨溪：以匠人的態度不斷打磨完善 Vue // 圖靈訪談

正如做者尤雨溪所說：Vue 的設計自己很強調實用主義（Pragmatism）。因此 2.0 在 API 上的大量精簡、多功能之間的平衡，或許能夠從做者的訪談中，探究到背後的開發思路。

Vue 2.0 的變化：（一）基本 API 變化 丨 （二）其餘重大更改 // 白小愛

結合第一期《Vue.js 起手式》中的「發展史」這一節，來看 2.0 的變化，再好不過了：各類雞肋的 API 和指令有刪有改，有用的組件和服務渲染等功能增強或者直接增長。

vue-router 2.0 改變的內容 // nicedoc

2.x 版本的 vue-router 相比以前的 0.7.x 版本，有不少破壞性改變：通用 API 的修改、路由配置、導航鉤子函數、連接（Links）、命名視圖 (Named Views)、滾動行爲（Scroll Behavior）…

Vue 2.0 源碼學習 // chenhao_ch

重點是對 2.0 新特性的學習：1. 體量更小，性能更優；2. 實現了 Virtual DOM，自動監測依賴、自動從新渲染，而且將靜態子樹進行了提取，減小界面重繪時的對比；3. 對 Template 和 JSX 寫法都作了支持，同時也支持了 Server Render。

Vue 2.0 源碼分析之理解響應式架構 // 楊川寶

這篇也是同樣，搭配做者前序系列《Vue 源碼分析之如何實現 observer 和 watcher》和《解析神奇的 Object.defineProperty》，讀起來更精彩。本文使用盡可能精簡的代碼，來還原 Vue 2.0 響應式架構的實現。

無痛學會各類 2 的 Vue2 + Vuex2 + Webpack2 先後端同構渲染 // 斑駁光影

結合實際項目，從 Vue.js 1.x 升級到 2.0，對比升級先後的不一樣之處，而後教學「使用 Vue2 + Vuex2 + Webpack2 搭建一個簡單的 ssr 項目」，可以直出頁面，還可以保存成靜態文件。

Vue 2.0 新手徹底填坑攻略—從環境搭建到發佈 // Jinkey

Vue 2.0 開發環境的推薦搭配，項目的開發依賴，一路到到發佈一個單頁面應用，手把手教學。

Vue 2.0 構建單頁應用最佳實戰 // 二哲

你沒看錯，「最佳實踐」都有了，使用 vue-cli 建立項目、vue-router 實現單頁路由、vuex 管理數據流、vue-resource 請求 node 服務端、.vue 文件進行組件化的開發……不廢話，直接看項目地址：MeCKodo / vue-tutorial。

Vuex - The Core of Vue Application

到底 Vuex 是什麼？ // 1000copy

做者以一個最簡單的 demo，演示「a. 單純依賴於 Vue.js」「b. 依賴 Vue.js，也使用 Vuex 技術」這兩種狀況下的代碼開發狀況，經過對比引出 Vuex 的概念、優點和劣勢，很是接地氣的方式。

Vuex — The Core of Vue Application // DiscipleD

「在 Vue 應用中，Vuex 就充當了數據提供者的角色，Vue 則只須要關注頁面的展現與交互。」隨着 Vue 2.0 的發佈，Vuex 在近期也隨之推出 2.0 版，本文將介紹 Vuex 2.0 的使用，Store、鏈接組件、容器組件和展現組件、管理路由（全家桶標配）。

譯 丨 Vue 和 Vuex 中的數據流 // llp要變身

Vue 組件之間共享狀態，能夠經過使用一個簡單的 JavaScript 對象，在每一個新組件當中引用來實現，也能夠經過標配的 Vuex 來實現。二者雖然沒有多大區別，但 Vuex 形式化了集中處理數據存儲的過程，並提供了全部功能方法去處理那些數據，這就足以讓它優而勝出。

Vuex 2.0 源碼解讀（一） // 499311496

Vuex 2.0 和 1.x 相比，API 改變的仍是不少的，但基本思想沒什麼改變，本篇就是主要講解 Vuex 暴露出的幾種方法：Store, install, mapState, mapMutations, mapGetters, mapActions，是 Vuex 裏使用的最多的一些方法。

Vue 實戰寶典

Vue.js 實踐和應用相關的內容太豐富了，整理成這個目錄和分類，想研究哪方面的，隨便自取，玩得開心~

實踐：

• Vue.js 開發實踐系列 by @aryu

  • （1）實現精巧的無限加載與分頁功能

  • （2）實現多條件篩選、搜索、排序及分頁的表格功能

  • （3）實現一個漂亮、靈活、可複用的提示組件

• 使用 Vue.js 快速開發單頁應用系列 by @hiluluke

  • （1）主體結構

  • （2）vue-router

  • （3）登陸頁面

  • （4）功能組件與路由組件通訊

應用：

• Vue + Vuex + Webpack 應用

  • 使用 Vuex + Vue.js 構建單頁應用

  • Vue 項目實踐（vuex + vue-router + vue-resource）

  • Vue 開發波紋點擊特效組件

  • 使用 Vue 寫一個 datepicker

  • Vue 實做簡易驗證機制 App

  • 基於 Vue 的直播播放器實戰

• 作個遊戲

  • 利用 Vue.js 實現拼圖遊戲

  • Vue + WebSocket + ES6 + Canvas 製做「你畫我猜」小遊戲

• 實現個 UI 庫

  • Vue 高效 UI 組件庫 - iView 開發實踐

  • N3-components - 強勁的 Vue UI 組件庫

  • Element - 一套優雅的 Vue 2.0 組件庫是如何開發的

  • Muse UI - 基於 Vue 2.0 的 Material Design UI 庫

• 搞個小項目

  • 用 Vue.js 實現了一個 V2EX 克隆項目

  • 使用 Vue.js 從零構建 GitHub 項目瀏覽器

  • 使用 Vue.js 和 Vuex 實現購物車場景

  • 基於 Vue.js 和 Webpack 的 Chat 示例

  • 一步一步教你用 Vue.js + Vuex 製做專門收藏微信公衆號的 app

  • Markcook 2.0 - 使用 Vue 2.0 和 Vuex 2.0 進行徹底重構升級

• 搭個博客

  • 用 Vue、Koa 和 Mongo 擼了我的博客和博客管理網站

  • Vue.js 實踐：一個 Node.js + MongoDB + Vue.js 的博客內容管理系統

  • Vue.js + LeanCloud 單頁面博客

• 作個筆記應用

  • Vue + Vuex + vue-router 強擼一發暗黑風 Markdown 日記應用

  • 用 Vuex 構建一個筆記應用

  • Vuex + Firebase 構建 Notes App

（本期完）

---

# SegmentFault 技術週刊 #

「技術週刊」是社區特別推出的技術內容系列，一週一主題。週刊篩選的每篇內容，是做者的獨到看法，踩坑總結和經驗分享。

每週二更新，歡迎「關注」或者「訂閱」。你們也能夠在評論處留言本身感興趣的主題，推薦主題相關的優秀文章。