【譯文】詳解 Vue 2.4.0 帶來的 4 個重大變化

譯者：張婧雅，美團點評金融前端團隊成員，目前是vue生態的重度用戶，之後將繼續研究深刻vue最佳實踐。

譯者注：實踐解決方案是簡單的，但思考的過程纔是值得咱們探索的。
原文連接：4 Important Changes In Vue.js 2.4.0

本週Vue.js發佈了有着豐富新特性和更加優化的2.4.0版本。
在這篇文章中，我將跟你們分享4個有突破性新特性。

• 服務端渲染異步組件
• 包裹組件內實現屬性繼承
• 異步組件支持webpack3
• 組件渲染後可保留HTML註釋

---

一、服務端渲染異步組件

在vue2.4.0之前版本，因爲沒法支持服務端渲染異步組件，致使他們一般在SSR中被忽略，只能等待在客戶端渲染。新版本使異步組件有着突破性的進展，同時修復這問題可讓Vue更好的實現PWAs。

異步組件

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

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

<template>
  <div id="app"> <!--Above-the-fold--> <sync-component></sync-component> <!--Below-the-fold--> <async-component></async-component> </div> </template> <script> import SyncComponent from './SyncComponent.vue'; const AsyncComponent = import('./AsyncComponent.vue'); export default { components: { SyncComponent, AsyncComponent } } </script>複製代碼

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

這能夠經過服務端渲染來改進，被標記的異步組件能夠在初始頁面內渲染，避免出現微調框或者空白區域，提升用戶體驗。

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

<div id="app" server-rendered="true">
    <!--Above-the-fold-->
    <div>
      Whatever sync-component renders as...
    </div>
    <!--Below-the-fold-->
 </div>複製代碼

從VUE2.4.0開始，異步組件將被包含在SSR輸出內容中，所以你有無白屏用戶體驗的進行VUE程序代碼分離。

---

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

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

<parent-component :passdown="passdown">
  <child-component :passdown="passdown">
    <grand-child-component :passdown="passdown">
      Finally, here's where we use {{ passdown }}!複製代碼

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

事件總線模式或者vuex也能夠解決跨非直接父子組件通訊的問題，但VUE2.4.0版本提供了一種新的解決方案。事實上，這個新功能是有兩個獨立卻相關的部分組成，首先，組件支持inheritAttrs的選項，其次需用到實例屬性$attrs。咱們經過一個例子來看它是如何工做的。

例子

咱們首先綁定兩個屬性在組件上，propa是組件本身須要使用的,而propb只是組件須要向下傳遞的一個屬性

<my-component :propa="propa" :propb="propb"></my-component>複製代碼

在Vue2.4.0以前版本，組件內未被註冊的屬性將做爲普通html元素屬性被渲染。因此你組件可能定義起來像是這樣

<template>
  <div>{{ propa }}</div>
</template>
<script>
export default {
  props: [ 'propa' ]
}
</script>複製代碼

它將渲染成下面的樣子

<div propb="propb">propa</div>複製代碼

propb僅僅被渲染普通html屬性，若是想讓屬性可以向下傳遞，即便prop組件沒有被使用，你也須要在組件上註冊。

export default {
  props: [ 
    'propa',
    'propb' // 註冊後才能向下傳遞 
  ]
}複製代碼

這樣作會使組件預期功能變得模糊不清，同時也難以維護組件的DRY。在Vue2.4.0,能夠在組件定義中添加inheritAttrs：false，組件將不會把未被註冊的propb呈現爲普通的HTML屬性。渲染效果以下：

<div>propa</div>複製代碼

向下傳遞propb

雖然prop在組件中沒有出現，但經過組件實例的$attrs（也是Vue2.4.0新增功能）獲取。組件的$attrs包含全部未被註冊的props

<template>
  <div>
  {{ propa }}
  <grand-child v-bind:propb="$attrs.propb"></grand-child>
  </div>
</template>
<script> export default { props: [ 'propa' ], inheritAttrs: false } </script>複製代碼

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

<input v-bind="$attrs">複製代碼

固然，也能夠經過這種方式用v-on綁定事件監聽傳遞函數

<div>
  <input v-bind="$attrs" v-on="$listeners"> </div>複製代碼

---

三、異步組件支持webpack3

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

兩個星期之前，vue-loaderv13.0.0發佈了，並將.vue文件做爲ES模塊輸出，這使得vue可以享受新的變量提高帶來的便利。

因爲ES模塊導出方式不一樣，在Vue項目中用於代碼拆分的簡潔的異步組件語法
例如

const Foo = () => import('./Foo.vue');

// 將改成：
const Foo = () => import('./Foo.vue').then(m => m.default);複製代碼

然而在Vue2.4.0在處理異步組件時，將自動解析爲ES模塊默認導出，容許之前更簡潔的語法。

---

四、保留HTML註釋

好吧，這個功能看起來並非那麼的重要，然我仍然以爲很酷。在Vue2.4.0以前版本，註釋將被省略

<template>
  <div>Hello <!--I'm a comment.--></div>
</template>複製代碼

渲染後：

<div>Hello</div>複製代碼

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

在Vue2.4.0，你可使用comments選項開啓註釋

<template>
  <div>Hello <!--I'm a comment.--></div>
</template>
<script> export default { comments: true } </script>複製代碼

---

最後，團隊爲了招聘方便，開通了公衆號，主要是一些招聘信息，團隊信息，全部的技術文章在公衆號裏也能夠看到，對了，若是你想去美團其餘團隊，咱們也能夠幫你內推哦 ~

團隊公衆號