FrontEnd

もうすぐ登場!Vue 3の変更点まとめ

投稿日:2020年9月7日 更新日:

はじめに

いよいよ、待望の Vue 3 のリリースが近づいてきています。今回は Vue 3 での変更点について、まとめてみました。目玉機能である Composition API については、こちらをご覧ください。

仕様変更

複数のv-modelが定義可能に

これまでは、コンポーネントに渡す v-model は一つだけでしたが、複数の v-model を定義できるようになります。

v-model を2つ定義したい場合、呼び出し元では、 v-model:xxx=”yyy” というように定義します。

コンポーネント側のコードは、このようになります。 setup 関数については、 こちらをご覧ください。

template直下に複数のタグを記述可能に

これまでは、 <template> タグの直下に記述できるのは、1つのタグのみだったので、 <div> タグで全体を囲っていたりしていましたが、 Vue 3 では、 Fragment が利用できるようになるため、複数のタグを記述できるようになります。

例えば、親のコンポーネントに <ul> タグがあり、その中に <li> タグが複数定義されているコンポーネントを入れる、といったことができるようになります。

開始処理がcreateAppに

従来のアプリの開始処理は、以下のように定義していましたが、

Vue 3 では、 createApp 関数を使って、定義するように変わりました。

ちなみに、 vue-router は、 vue-router-next を使用するようになります。

scoped cssの仕様変更

scoped CSS で使える擬似クラスとして、 ::v-deep() 、 ::v-slotted() 、 ::v-global が追加されました。

::v-deep() は、子のコンポーネントにスタイルを適用するための擬似クラスで、今までは、 /deep/ として設定することができました。

::v-slotted() は、slot で受け取った親のコンポーネントの要素に、スタイルを適用するためのものです。

::v-global は、 scoped CSS 内で、グローバルなスタイルを定義するためのものです。

$attrsの仕様変更

$attrs が拡張され、 $listeners で参照していたイベントや、別で管理されていた、 class や style も$attrs から取得できるようになります。

廃止

filterを廃止

filter には、学習コストの増加や、公文解析を複雑にするデメリットがあり、メソッドで代用可能なため、削除されます。

Functional Componentを廃止

通常のコンポーネントと Functional Component との性能差が大幅に縮小されたため、削除されます。

一部のEvent Emitter APIを廃止

$on 、 $off 、 $once が削除されます。 Event の管理には、 Mitt などのライブラリの使用が推奨されています。

新機能

コンポーネントを移動させるTeleport

<Teleport> タグで囲った部分を、 to属性で指定した先に移動させることができます。モーダルやポップアップなど、コンポーネントの外部に記述された領域に、コンポーネントの内容を反映する際に便利な機能です。

たとえば、子のコンポーネントの内容を

親のコンポーネントに移動させます。

準備中を表すSuspense

Suspense は、コンポーネントの準備中に別の表示をしたい場合に利用します。

<suspense> タグの中に2つの <template> タグを記述します。 #default が指定されている方の <template> タグに含まれる、すべての非同期コンポーネントの準備が完了するまでは、 #fallback が指定されいる方の <template> タグの内容が表示されます。

ちなみに、非同期コンポーネントを作成するには、 setup() 関数を async/await にする必要があります。

その他

バインディングの改善

これまでは、配列の要素の更新や、オブジェクトのプロパティの追加、削除を画面に反映させるには、以下のように Vue.set や Vue.delete メソッドで操作する必要がありました。

Vue 3 では、これらの変更が直接画面に反映されるようになります。

TypeScriptサポートの強化

TypeScript 環境で Composition API を利用する場合、 defineComponent メソッドを利用すると、型推論が有効になります。

また、 reactive や ref メソッドで記述する変数の型を、指定できます。

Composition API については、くわしくはこちらをご覧ください。

さいごに

まもなくリリースされる、 Vue 3 での変更点をまとめました。今は、 v-3.0.0-rc.10 が出ています。正式リリースされるのが楽しみです。

おすすめ書籍

Vue.js入門 基礎から実践アプリケーション開発まで  改訂2版 基礎から学ぶVue.js [2.x対応! ]  プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

正式版Vue.js 3.0のTeleportを触ってみる

1 はじめに1.1 Vue.js 3.0のプロジェクト作成方法1.2 Teleportとは2 基本形2.1 コード2.2 画面3 別のコンポーネントの入れ子にする場合3.1 コード3.2 画面4 同じ ...

Vue.js入門その7〜セレクトボックスを動的に変更してみる〜

1 はじめに1.1 サンプル2 とりあえず作ってみる2.1 ソースコード2.2 セレクトボックスにv-modelでバインド2.3 <option>はv-forでリストレンダリング2.4 メ ...

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

[Rails + Materialize] DateTimePickerがなかったので…

1 はじめに2 前提条件2.1 ビューのイメージ3 モデルにゲッターとセッターを追加4 入力フォームに追加4.1 JSファイルにて使用宣言4.2 HTML4.3 コントローラーのストロングパラメータを ...

js

JavaScriptのみでPOSTした場合のCSRFトークンの認証に関するTIPS

1 はじめに2 実装2.1 なぜエラーが発生したか2.2 修正後のコード3 さいごに はじめに RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを ...

フォロー

follow us in feedly

blog-page_side_responsive

2020年9月
 12345
6789101112
13141516171819
20212223242526
27282930 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。