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

前端深夜告解室發表於2017-07-25
Vue

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

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

本週Vue.js釋出了有著豐富新特性和更加優化的2.4.0版本。
在這篇文章中，我將跟大家分享4個有突破性新特性。

  • 服務端渲染非同步元件
  • 包裹元件內實現屬性繼承
  • 非同步元件支援webpack3
  • 元件渲染後可保留HTML註釋

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

在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程式程式碼分離。

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

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>複製程式碼

3、非同步元件支援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模組預設匯出，允許以前更簡潔的語法。

4、保留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>複製程式碼

最後，團隊為了招聘方便，開通了公眾號，主要是一些招聘資訊，團隊資訊，所有的技術文章在公眾號裡也可以看到，對了，如果你想去美團其他團隊，我們也可以幫你內推哦 ~

團隊公眾號
團隊公眾號

相關文章