Vue 2.0 發布啦!
今天我們非常激動的首發 Vue 2.0 preview 版本,這個版本帶來了很多激動人心的改進和新特性。我們來看看這里面都有些什么!
更輕,更快
Vue.js 始終聚焦在輕量和快速上面,而 2.0 把它做得更好。現在的渲染層基于一個輕量級的 virtual-DOM 實現,在大多數場景下初試化渲染速度和內存消耗都提升了 2~4 倍 (詳見這里的 benchmarks )。從模板到 virtuel-DOM 的編譯器和運行時是可以獨立開來的,所以你可以將模板預編譯并只通過 Vue 的運行時讓你的應用工作起來,而這份運行時的代碼 min+gzip 之后只有不到 12kb (提一下,React 15 在 min+gzip 之后的大小是 44kb)。編譯器同樣可以在瀏覽器中工作,也就是說你也可以寫一段 script 標簽然后開始你的工作,就像以前一樣。而即便你把編譯器加進去,build 出來的文件 min+gzip 之后也僅有 17kb,仍然小于目前的 1.0 版本。
不是普通的 Virtual-DOM
現在 virtual-DOM 有點讓人聽膩了,因為社區里有太多種實現,但是 Vue 2.0 的實現有與眾不同的地方。和 Vue 的響應式系統結合在一起之后,它可以讓你不必做任何事就獲得完全優化的重渲染。由于每個組件都會在渲染時追蹤其響應依賴,所以系統精確地知道應該何時重渲染、應該重渲染哪些組件。不需要 shouldComponentUpdate
,也不需要 immutable 數據 - it just works .
除此之外,Vue 2.0 從模板到 virtuel-DOM 的編譯階段使用了一些高階優化:
-
它會檢測出靜態的 class 名和 attributes 這樣它們在初始化渲染之后就永遠都不會再被比對。
-
它會檢測出最大靜態子樹 (就是不需要動態性的子樹) 并且從渲染函數中萃取出來。這樣在每次重渲染的時候,它就會直接重用完全相同的 virtual nodes 同時跳過比對。
這些高階優化通常只會在使用 JSX 時通過 Babel plugin 來做,但是 Vue 2.0 即使在使用瀏覽器內的編譯器時也能做到。
新的渲染系統同時允許你通過簡單的凍結數據來禁用響應式轉換,配以手動的強制更新,這意味著你對于重渲染的流程實際上有著完全的控制權。
以上這些技術組合在一起,確保了 Vue 2.0 在每一個場景下都能夠擁有高性能的表現,同時把開發者的負擔和成本降到了最低。
Templates, JSX, or Hyperscript?
開發者對于用模板還是 JSX 有很多的爭執。一方面,模板更接近 HTML - 它能更好地反映你的 app 的語義結構,并且易于思考視覺上的設計、布局和樣式。另一方面,模板作為一個 DSL 也有它的局限性 - 相比之下 JSX/hyperscript 的程序本質使得它們具有圖靈完備的表達能力。
作為一個兼顧設計和開發的人,我喜歡用模板來寫大部分的界面,但在某些情況下我也希望能擁有 JSX/hyperscript 的靈活性。舉例來說,當你想在一個組件中程序化的處理其子元素時,基于模板的 slot 機制會顯得比較有局限性。
那么,為什么不能同時擁有它們呢?在 Vue 2.0 中,你可以繼續使用熟悉的模板語法,但當你覺得受限制的時候,你也可以直接寫底層的 virtual-DOM 代碼,只需用一個 render
函數替換掉 template
選項。你甚至可以直接在你的模板里使用一個特殊的 <render>
標簽來嵌入渲染函數!一個框架,兩全其美。
流式服務端渲染
既然遷移到了 virtual-DOM,Vue 2.0 自然支持服務端渲染和客戶端的 hydration(直接使用服務端渲染的 DOM 元素)。當前服務端渲染的實現有一個痛點,比如在 React 里,渲染是同步的,所以如果這個 app 比較復雜的話它會阻塞服務器的 event loop。同步的服務端渲染在優化不當的情況下甚至會對客戶端獲得內容的速度帶來負面影響。Vue 2.0 提供了內建的流式服務端渲染 - 在渲染組件時返回一個可讀的 stream,然后直接 pipe 到 HTTP response。流式渲染能夠確保服務端的響應度,也能讓用戶更快地獲得渲染內容。
解鎖更多可能性
基于新的架構,我們還有更多的可能性有待開發 - 比如在手機端渲染到 native 界面。目前我們正在探索一個 Vue.js 2.0 的端,它會用 weex :一個由中國最大科技公司之一的阿里巴巴的工程師們維護的項目,作為一個 native 的渲染層。同時從技術角度 Vue 2.0 運行在 ReactNative 上也是可行的。讓我們拭目以待!
兼容性以及接下來的計劃
Vue.js 2.0 仍然處在 pre-alpha 階段,但是你可以來 這里 查看源代碼。盡管 2.0 是一個完全重寫的項目,但是除了一些有意廢棄掉的功能,API 和 1.0 是大部分兼容的。看看 2.0 中一模一樣的官方例子 - 你會發現幾乎沒有什么變化!
對于部分功能的廢棄,本質上是為了提供更簡潔的 API 從而提高開發者的效率。你可以移步 這里 查看 1.0 和 2.0 的特性比對。如果你在現有的項目中大量地使用著一些被廢棄的特性,這意味著會有一定的遷移成本,不過我們在未來會提供更詳實的升級指導。
現在我們還有很多工作沒有完成。一旦我們達到了令人滿意的測試覆蓋率,我們將會推出 alpha 版本,同時我們希望能在五月底六月初推出 beta 版。除了更多的測試之外,我們也需要更新相關庫(如 vue-router, Vuex, vue-loader, vueify...)的支持。目前只有 Vuex 在 2.0 下可以直接使用,但是我們會確保在 2.0 正式發布時所有東西都會順暢地工作。
我們不會因此而忘記 1.x 哦!1.1 將會和 2.0 beta 獨立發布,提供六個月 critical bug fixes 和九個月安全升級的長效服務 (LTS)。同時 1.1 還會包含可選的廢棄特性警告,讓你為升級到 2.0 做好充足的準備。盡請期待!
來自: http://jiongks.name/blog/announcing-vue-2/