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


関連記事

docker-syncでファイルの同期を高速化する

1 はじめに2 docker-syncの導入3 設定ファイルの作成3.1 docker-composer.yml3.2 docker-compose-dev.yml3.3 docker-sync.ym ...

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

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

js

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

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

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

js

Vue.jsをTypeScriptで安全に開発するためのtsconfig.json

1 はじめに1.1 開発環境1.2 プロジェクト作成時点のtsconfig.json2 include3 exclude4 compilerOptions4.1 コンパイル系オプション4.1.1 ta ...

フォロー

follow us in feedly

blog-page_side_responsive

2020年9月
 12345
6789101112
13141516171819
20212223242526
27282930 

アプリ情報

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