Code Review for Vue 2.0 Preview

<a href="http://jiongks.name/blog/announcing-vue-2/">是的！vue 2.0 釋出了！</a>

<a href="https://github.com/vuejs/vue/tree/next">vue 2.0 preview 倉庫在此</a>

首先，當我第一次看到 vue 2.0 的真面目的時候，我的内心是非常激動的

來個簡單的 demo，首先把 <code>dist/vue.js</code> 導入到一個空白的網頁裡，然後寫：

當然，在大家閱讀下面所有的内容之前，先想象一下，這是一個運作時 min+gzip 後隻有 12kb 大小的庫

你将看到 "hello vue"

然後再看一個神奇的：

這個是 compile 過後的格式，大家會發現首先 <code>#app</code> 下不需要寫模闆了，然後 <code>&lt;script&gt;</code> 裡多了一個 <code>render</code> 字段，vue 在運作時其實是會把模闆内容先轉換成渲染方法存入 <code>render</code> 字段，然後再執行，如果發現 <code>render</code> 已經存在，就跳過模闆解析過程直接渲染。是以在 vue 2.0 中寫一段模闆和寫一個 <code>render</code> option 是等價的。為什麼要這樣設計，稍後會我們會涉及到。

哎呀好東西太多我都不知道該先講哪個啦！

<a href="https://github.com/vuejs/vue/blob/next/package.json">https://github.com/vuejs/vue/blob/next/package.json</a>

另外你們就選眼睛再遲鈍也會看到 ssr 這個詞吧！對，就是服務端渲染 server-side rendering！先不急，這個最後說，你們可以先去 high 一會兒

作為一個見證了一小段 vue 2.0 成長過程的腦殘粉，我得跟大家從時間線的角度介紹一下這個檔案夾：

早些時候 vue 2.0 的代碼還是這樣分的，一半運作時，一半(預)編譯時，中間會通過一個 javascript 的格式嚴格劃清界限，即源代碼 template + javascript 經過編譯之後變成了一段純 javascript 代碼，然後這段純 javascript 的代碼又可以在運作時被執行渲染。

這裡面奇妙的地方是：編譯時的代碼完全可以脫離浏覽器預執行，也可以在浏覽器裡執行。是以你可以把代碼提前編譯好，減輕運作時的負擔。

vue 最早會打包生成三個檔案，一個是 runtime only 的檔案 vue.common.js，一個是 compiler only 的檔案 compiler.js，一個是 runtime + compiler 的檔案 vue.js，它們有三個打包入口，都放在了 <code>entries</code> 目錄下，這是 <code>src</code> 裡的第三個檔案夾，第四個檔案夾是 <code>shared</code>，放置一些運作時和編譯時都會用到的工具方法集。

wahahaha~

這要說到 vue 2.0 的第二個優點：virtual-dom！virtual-dom 有很多優點，也被很多人熱議，而 vue 2.0 裡面的 virtual-dom 簡直是把它做到了極緻！代碼非常簡練，而且性能超高 (據說秒殺 react，我自己沒試過，大家可以自己比比看)。在這一點上編譯器的前置起到了非常重要的作用，而且很多 diff 算法的優化點而且是在運作時之前就準備好的。

另外 virtual-dom 的另一個優點當然就是可以對渲染引擎做一般化的抽象，進而适配到更多類型的終端渲染引擎上！是以在我的慫恿下，小右把本來在 <code>runtime</code> 下的 <code>runtime/dom</code> 檔案夾挪到了一個名叫 <code>platforms</code> 的新檔案夾下，改名叫 <code>platforms/web/runtime</code>，把本來 <code>compiler</code> 檔案夾下 web 相關的 <code>modules</code> 挪到了 <code>platforms/web/compiler</code>！

(是的沒錯，今天在 weex 的子倉庫裡已經有另外一個 <code>platforms/weex</code> 檔案夾了耶)

是的沒有錯！vue 2.0 既然已經有了 virtual-dom，也有了運作環境無關的 compiler，為什麼不能 ssr 呢？！vue 2.0 不隻是簡單的把預渲染拿到服務端這麼簡單，vue 2.0 ssr 除了提供傳統的由源檔案編譯出字元串之外，還提供了輸出 stream 的功能，這樣服務端的渲染不會因為大量的同步字元串處理而變慢。即：<code>createrenderer()</code> 會傳回 <code>rendertostring()</code> 和 <code>rendertostream()</code> 兩個方法。同時，在 <code>platforms/web</code> 檔案夾下除了 <code>runtime</code> 和 <code>compiler</code> 之外又多了一個 <code>server</code> 目錄，這樣編譯器、服務端流式預渲染、運作時的鐵三角架構就這樣達成了！

說到測試，我驚奇的發現，在帶來了這麼多颠覆性的改變之後，vue 2.0 竟然完好保留了絕大多數 1.0 的 api 設計，而且更快更小巧延展性更強。vue 2.0 在前期研發階段主要是通過粗線條的 e2e 測試進行品質保障的，因為版本延續性做得非常好，是以這部分在 1.x 的積累已經幫上很大忙了。現在 vue 2.0 逐漸的在從 feature 的角度在進一步覆寫測試用例，對每個 api 和每個流程進行測試。目前以我個人的感覺主要的常見的鍊路都已經比較暢通了，具體功能細節上偶爾還是會遇到 bug 待修複，不過作為一個新興的 vue 2.0 來說，相信這已經遠遠超過大家的預期了！

我覺得 vue 2.0 在編譯器和運作時的解耦上做得超級棒！中間格式設計得也非常巧妙，把靜态的部分在編譯時就分析出來，而且通過非常簡單的 <code>__h__</code>, <code>__renderlist__</code> 等方法就搞定了幾乎所有的邏輯控制和資料綁定。之前我個人在實踐 weex 的時候也是會把 template 提前 compile，但隻是 compile 成一段 json，邏輯分析還是在運作時做的，當時和小右交流的時候就在讨論，能不能把分析過程也前置，無奈自己功力不夠啊，一直沒搞出來。看到 2.0 橫空出世，簡直是淚流滿面有木有！！

還有一件事情也是之前跟小右聊到過，就是目前 vue 提供的很多 directive 包括 filter 也都是有機會前置處理的，是以在 vue 2.0 裡，有相當一部分 directive 是前置處理成一般格式的，運作時隻是針對各端的渲染機制保留了 attr, style, class, event 等幾個最基礎簡單的解析過程，比如 if, for, else 都直接在 compile 的時候被解開了。而且 vue 2.0 把這部分内容抽象得如此清晰，除了贊歎還是贊歎！！

還有就是，你們去看看 vue 2.0 的送出記錄，300+ 次送出，上萬行高效優質的代碼，總共花了差不多兩周的時間，而且送出時間幾乎遍布二十四個小時……

别的不多啰嗦了，我覺得大家還是親自看過 vue 2.0 的源碼，會對這些内容有更深刻的了解。從今天起，fork + clone vue 2.0，寫寫 demo、寫寫測試、練練英文 xd go!