詳解 Vue 2.4.0 帶來的 4 個重大變化

前言

今日早讀文章由美團點評金融前端團隊 Vue 生態重度用戶 @ 張婧雅 翻譯投稿分享。

正文從這開始～

實踐解決方案是簡單的，但思考的過程才是值得我們探索的。

本周Vue.js發布了有著豐富新特性和更加優化的2.4.0版本。

在這篇文章中，我將跟大家分享4個有突破性新特性。

服務端渲染非同步組件

包裹組件內實現屬性繼承

非同步組件支持webpack3

組件渲染後可保留HTML 注釋

1、服務端渲染非同步組件

非同步組件

非同步組件是非常方便的，簡而言之，它能讓你的應用代碼分離，使非必要組件（比如模態，選項卡，摺疊內容，其他頁面等）在首頁載入後延遲載入， 從而讓用戶更快的看到主頁。

假如你決定以非同步方式載入內容，主組件可能如下所示：

importSyncComponentfrom ./SyncComponent.vue ;

constAsyncComponent=import( ./AsyncComponent.vue );

exportdefault{

components:{

SyncComponent,

AsyncComponent

}

}

通過使用webpack的動態import 函數，可使非同步組件將在服務端頁面後，通過ajax請求被載入。不足就是，當載入中用戶可能只能看到微調框或者是空白區域。

這可以通過服務端渲染來改進，被標記的非同步組件可以在初始頁面內渲染，避免出現微調框或者空白區域，提高用戶體驗。

VUE2.4.0增加server-rendered屬性使其變得可能。SSR中主組件輸出如下。

Whatever sync-component rendersas...

2、組件內新增實現屬性繼承

VUE中一個比較令人煩惱的事情是屬性只能從父組件傳遞給子組件。這也就意味著當你想向嵌套層級比較深組件數據傳遞，只能由父組件傳遞給子組件，子組件再傳遞給孫子組件...像下面這樣

Finally,here s where we use{{passdown}}!

demo中只有一兩個屬性還好，試想一下，當在一個真實的項目中，你可能有非常非常多的屬性需要傳遞時，那是怎樣一種恐怖的場景。

例子

我們首先綁定兩個屬性在組件上，propa是組件自己需要使用的,而propb只是組件需要向下傳遞的一個屬性

{{propa}}

exportdefault{

props:[ propa ]

}

它將渲染成下面的樣子

propa

propb僅僅被渲染普通html屬性，如果想讓屬性能夠向下傳遞，即使prop組件沒有被使用，你也需要在組件上註冊。

exportdefault{

props:[

propa ,

propb // 註冊後才能向下傳遞

]

}

propa

向下傳遞prop

{{propa}}

exportdefault{

props:[ propa ],

inheritAttrs:false

}

想像當你需要向多個嵌套層級中，傳遞上千百個屬性時，這個特性使你的在每個中間組件屬性定義變得相當簡潔。

當然，也可以通過這種方式用v-on綁定事件監聽傳遞函數

3、非同步組件支持webpack3

作用域提升是最近發布的webpack3的關鍵功能之一。webpack 1和2是將模塊打包到一個獨立的函數作用域內。通過新的ES2015模塊語法實現的範圍提升方法在瀏覽器中的執行速度，比老的獨立範圍的方式要快的多。

由於ES模塊導出方式不同，在Vue項目中用於代碼拆分的簡潔的非同步組件語法

例如

constFoo=()=>import( ./Foo.vue );

// 將改為：

constFoo=()=>import( ./Foo.vue ).then(m=>m.default);

4、保留HTML注釋

Hello

渲染後：

Hello

問題是，有些注釋需要被渲染在頁面中，有些庫可能需要這些注釋。

Hello

exportdefault{

comments:true

}

最後

關於本文

譯者：@ 張婧雅（公號：meituanfsp）

作者：@ANTHONY GORE

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！