Vue 2.4.0 の特徴がわからなかったのでとあるブログを訳してみた

本記事は以下のガバ和訳です。
4 Important Changes In Vue.js 2.4.0

Vue 2.4 における 4 つの重大な変更

Vue.js 2.4.0 が豊富な新機能、修正、最適化を伴って今週リリースされました。
この記事では、私がとても面白いと思う 4 つの新機能についてブレークダウンしていきます。
– Async Component のサーバサイドレンダリング
- Wrapper Component の属性継承
– Webpack 3 での Async Component のサポート
– Component 内での HTML コメントの保持

Async Component のサーバサイドレンダリング

Vue 2.4 以前はサーバサイドレンダリングはできませんでした ( SSR の出力は無視され、生成するクライアントに残っていた ) 。
これは Async Component に重大な欠陥をもたらしており、本件を修正することで Vue を用いたより良い PWA を実現できます。

Async Components

Async Component はとても手軽です。
もし私のブログをフォローしてくれているなら最近たくさん Async Components のことを書きました。
要するに、はじめのページのロード後に必須ではない Component ( モーダル、タブ、折りたたまれたコンテンツ、他のページなど ) を読み込まれるようにコード分割でき、ユーザが素早くメインページのコンテンツを見ることができます。
折りたたみコンテンツを非同期でロードすることにしたとしましょう。
メイン Component は以下のようになるかもしれません。

Webpack の dynamic import 関数を使うことで、 AsyncComponent はページのロード後に AJAX で読み込まれます。
欠点はロードしている間はユーザがスピナーか空白しか見れないことです。
本問題は Async Component のマークアップがはじめのページのロード時にレンダリングされるため、サーバ側のレンダリングで改善できます。スピナーや空白より UX の方がずっと良いでしょう。
しかし Vue 2.4.0 以前はこれができませんでした。
メインコンポーネントの SSR 出力がこのようになっています。

Vue 2.4.0 では、 Async Component SSR 出力に含まれているため、 UX の負債なく心いくまで Vue アプリをコード分割することができます。

Wrapper Component の属性継承

プロパティのやっかいごとの一つとして、プロパティは親から子へしか通す事しかできません。
それは深くネストした Component に対してデータを通す際に、中間 Component ごとにプロパティをバインドさせる必要があるということです。 

1 、 2 個のプロパティなら悪くないでしょうが、実際のプロジェクトは沢山、かなり沢山のプロパティを通します。
イベントバスや Vuex で本問題を解決してきたかと思いますが、 Vue 2.4 は別の解決方法を提供します。
現に 2 つの独立しており、しかし関連する機能の一部です。
1 つ目は inheritAttrs と呼ばれる Component のフラグ、 2 つ目は $attrs というインスタンスプロパティです。
サンプルを通してどう動くか見てみましょう。

サンプル

Component に 2 つの属性がバインドされています。この Component は自身の目的のために propa を必要としますが、 propb は必要としません。
それを別のネストされたコンポーネントに渡すだけです。

Vue < 2.4.0 では、 prop として登録されていないバインドされた属性は、単に単に通常の HTML としてレンダリングされます。
Component の定義が以下のようになっている場合、

このようにレンダリングされます。

propb が通常の HTML としてレンダリングされたことに注目してください。
この Component に propb を通したいのであれば、 Component に直接的な必要性がないにしても prop として登録する必要があります。

これにより、コンポーネントの意図された機能が不明瞭になり、コンポーネントを DRY に保つのが困難になります。
Vue 2.4.0 では、コンポーネント定義にフラグ inheritAttrs:false を追加することができ、コンポーネントは b を通常の HTML 属性としてレンダリングしません。

propb を伝える

propb は消えませんが、インスタンスプロパティ $attrs (Vue 2.4.0 にも追加されています ) のコンポーネントで引き続き使用できます。このインスタンスプロパティには、 props として登録されていないバインドされた属性がすべて含まれます。

親からいくつかのネストされた Component の層まで、数百の小道具を渡す必要があるとします。この機能により、各仲介 Component テンプレートは、親スコープでより簡潔に宣言できます。

ああ、これは v-on でリスナーをバインドしてデータを渡すときも全く同じです。

Webpack 3 での Async Component のサポート

スコープのホイスティングが 近々リリースされる Webpack 3 の主要な機能の一つです。
Webpack 1 と 2 では、あまり詳しく説明しませんが、バンドルされたモジュールは個別の関数クロージャでラップされます。これらのラッパー関数は、新しい ES2015 モジュール構文で可能になったこの新しいスコープホイストメソッドと比較して、ブラウザで実行するのが遅いです。
2 週間前に vue-loader v13.0.0 がリリースされ、 .vue ファイルが ES モジュールとして出力されるようになり、新しいスコープのパフォーマンス上のメリットが得られました。
残念ながら、 ES モジュールは異なる方法でエクスポートされるため、 Vue プロジェクトでのコード分割に使用できるきちんとした非同期コンポーネント構文を

これに変更する必要があります。

ただし、Vue 2.4.0 では、非同期コンポーネントを処理する際に、 ES モジュールのデフォルトのエクスポートが自動的に解決されるため、以前のより簡潔な構文が可能になります。

Component 内での HTML コメントの保持

さて、本機能は重要ではないけど、私はイケてる機能だと思いますよ。
Vue < 2.4.0 では、コメントがレンダリングされたときにコンポーネントから削除されました。

レンダリング時

問題は、レンダリングされたページでコメントが必要になることがあることです。
たとえば、コメントをプレースホルダとして使用するなど、ライブラリ側が必要とする場合があります。
Vue 2.4.0 では、 comments フラグを使用して、コメントを保存することを指定できます。

完走した感想

最近の google 翻訳すげぇ


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください