【整理】Vue 2.0 自 beta 1 自 beta 4 以來的主要更新

首先 vue 2.0 對 alpha、beta 有自己的了解和設定：alpha 版本旨在完善 api、考慮所需的特性；而來到 beta 版則會對未來的正式釋出進行充分的“消化”，比如提前進行一些必要的 breaking change，增強架構的穩定性、完善文檔和周邊工具 (如 vue-router 2.0 等)

vue 本身的文法基礎這裡就不多贅述了，網上有很多資料可以查閱，我們已經假定你比較熟悉 vue 并對 2.0 的理念和技術預覽版的狀态有一定的了解。

ref 的寫法由 <code>&lt;comp v-ref:foo&gt;</code> 變成了 <code>&lt;comp ref="foo"&gt;</code>，更加簡單，同時動态資料的寫法是 <code>&lt;comp :ref="x"&gt;</code>

支援 functional components，這個特性蠻酷的，可以把一個元件的生成過程完全變成一個高度自定義的函數執行過程，比如：

你可以在 <code>render()</code> 函數裡寫各種特殊的邏輯，這樣标簽的含義和能力都得到了非常大的擴充，在後續的幾次更新中，你馬上會感受到一些 functional components 的威力

另外劇透一下，<code>h</code> 方法裡的第二個參數如果是 <code>null</code> 就可以省略，這個改動出現在了 beta 1

可以設定特殊的 keycode，比如 <code>vue.config.keycodes.a = 65</code>，然後你就可以寫 <code>&lt;input @keyup.a="apressed"&gt;</code> 了

一個元件的生命周期名由 <code>init</code> 改成了 <code>beforecreated</code> (大家可以在 vuex 和 weex-vue-framework 的源碼裡看到對應的改變哦)

<code>vue.transition</code> 的 hook 支援第二個參數，把 vm 傳遞進去，如：

自定義 directive 裡 <code>update</code> 的觸發時機發生了變化，由于 functional component 等概念的引入，一個 directive 的變更的顆粒度也不完全是 directive 本身引起的，是以這裡做了一個更具有通用性的調整；同時 hook 名 <code>postupdate</code> 也相應的更名為 <code>componentupdated</code>——如果你想讓 <code>update</code> 保持原有的觸發時機，可以加入一句 <code>binding.value !== binding.oldvalue</code> 即可。

<code>vue.traisition</code> 的 hook 名做了簡化

<code>onenter</code> -&gt; <code>enter</code>

<code>onleave</code> -&gt; <code>leave</code>

server-side rendering

<code>server.getcachekey</code> 更名為 <code>servercachekey</code>，避免多一層結構嵌套

<code>createrenderer</code>/<code>createbundlerenderer</code> 方法不會強制應用 <code>lru-cache</code>，而是開發者手動選擇

<code>&lt;transition&gt;</code> 标簽來了！

其實這個玩意兒我之前在 polymer 等其他架構裡也見到過，不過看到 vue 的文法設計，還是覺得巧妙而簡潔：

更牛掰的在這裡，還記得 functional components 吧，你今天可以這樣抽象一個動畫效果的标簽：

然後

就可以實作高度自定義的動畫效果了，這個我個人覺得是非常贊的設計和實作！

支援兩種文法 <code>&lt;div :xxx.prop="x"&gt;</code> 和 <code>&lt;div v-bind:prop="{ xxx: x }"&gt;</code> 來對 dom 的 property 進行綁定，這個實作也給了 weex 一些啟發，因為現在 weex 的 virtual-dom 裡是沒有 property 的，隻有 attribute，但是在元件設計當中，隻有 attr 沒有 prop 還是顯得捉襟見肘。現在我們的 native 元件大多是通過 native module apis 來變相達到類似的目的的，vue 的這個新的設計稍微給 weex 也開了個小小的腦洞，也許順着這個思路能做出些更友善好用的東西出來

2 天前釋出的，其實這個版本以 bugfix 為主

以上是近期 vue 2.0 的一些更新，讓我自己比較興奮的主要是 functional component 以及基于這個設計的 <code>&lt;transition&gt;</code> 和 <code>&lt;transition-group&gt;</code> 标簽和自定義 transition 标簽的能力拓展，還有就是久違的 <code>&lt;comp @click.native="..."&gt;&lt;/comp&gt;</code>

最後希望大家可以多多試用，有更大興趣的可以多多學習 vue 的源碼，有更大興趣的可以參與一下 weex！(硬廣完畢)