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


関連記事

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

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

Cordovaの実機デバッグでハマった話

1 はじめに2 Cordovaとは2.1 React Nativeとの違い3 Cordovaでモバイルアプリを作る3.1 Node.jsをインストール3.2 Cordovaのコマンドラインツールをイン ...

js

Reactを始める前に知っておきたいES2015/ES6の機能

1 はじめに2 ECMAScript – ES2015/ES6とは3 変数と定数とスコープ4 テンプレート文字列5 分割代入6 デフォルト引数7 残余引数(レストパラメータ)8 展開(スプ ...

ウチのMaterialize事情

1 はじめに2 ボタン3 フォーム3.1 ラベルについて3.2 セレクトボックスについて3.3 ラジオボタンについて4 アラート5 フォント6 さいごに はじめに うちのチームでは現在、CSSフレーム ...

Vue CLIでPWAが簡単に実装できる 〜 Service Worker と A2HS 〜

1 はじめに2 環境構築2.1 Vue CLIをインストール2.2 プロジェクトを作成2.3 PWA選択時に追加されるファイル2.4 動作確認時の注意3 Service Worker3.1 Servi ...

フォロー

blog-page_side_responsive

2020年9月
 12345
6789101112
13141516171819
20212223242526
27282930  

アプリ情報

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