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

01-28

原文地址：https://segmentfault.com/a/1190000007638646

在今年 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 技術周刊 #
「技術周刊」是社區特別推出的技術內容系列，一周一主題。周刊篩選的每篇內容，是作者的獨到見解，踩坑總結和經驗分享。
每周二更新，歡迎「關注」或者「訂閱」。大家也可以在評論處留言自己感興趣的主題，推薦主題相關的優秀文章。