はじめに
Vue.jsは、Webページのユーザーインタフェース(UI)を構築できるフレームワークです。2015年のバージョン1(Vue 1)、2016年のバージョン2(Vue 2)に続き、バージョン3(Vue 3)が開発中で、2020年第2四半期にリリース予定です。
前回記事ではコンポーネントの新しい記述形式「Composition API」を紹介しましたが、他にもさまざまな新機能がVue 3で導入されます。本記事では、それ以外の主な新機能を抜粋して紹介していきます。
対象読者
- Vue 3の概要を把握したい方
- 新しいライブラリーを試してみたい方
- これからVue.jsをプロジェクトに採用する予定の方
必要な環境の準備
本記事のサンプルコードは、以下の環境で動作を確認しています。
Windows 10 64bit版
- Node.js v10.18.1 64bit版
- Vue.js 3.0.0-beta.15
- Vue CLI 4.4.4
- Microsoft Edge 83.0.478.54
本記事のサンプルコードは、Vue.jsのCLIツール「Vue CLI」を利用して生成しています。Vue CLIでVue 3対応プロジェクトを生成する方法は、前回記事を参照してください。
サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「npm run serve」コマンドを実行して、Webブラウザーで「http://localhost:8080/」を開きます。
Composition APIだけではない、Vue 3の新機能
Vue 3におけるComposition API以外の主要な新機能や変更点を、以下で紹介します。
複数のv-model
従来、双方向データバインディングを実現するv-modelディレクティブはコンポーネントにつき1つだけ定義できましたが、Vue 3では複数定義できます。その方法を図1のサンプルで説明していきます。このサンプルでは、入力フォームを2個含むコンポーネントに、それぞれv-modelディレクティブで双方向データバインディングを設定していきます。
![図1 複数v-modelのサンプル(p001-multi-vmodel)](http://cz-cdn.shoeisha.jp/static/images/article/12611/12611_1.png)
コンポーネントを利用する側で複数v-modelを設定するには、リスト1の通り「v-model:<変数名>」形式で記述します。ここではname(機種名)とvendor(メーカー)についてv-modelディレクティブを記述しています。
<multi-v-model v-model:name="name" v-model:vendor="vendor"/>
リスト1の<multi-v-model>に対応する複数v-modelコンポーネントは、リスト2の通り実装します。
<template> <div class="multi-v-model"> <div> <div>機種名:</div> <!--(1)--> <input v-bind:value="name" v-on:input="updateName($event.target.value)"> </div> <div> <div>メーカー:</div> <!--(2)--> <input v-bind:value="vendor" v-on:input="updateVendor($event.target.value)"> </div> </div> </template> <script> export default { // v-modelディレクティブで指定されるプロパティ ...(3) props: { name: String, vendor: String }, // コンポーネント設定処理 ...(4) setup(props, context) { // name変更時の処理 ...(5) function updateName(value) { context.emit('update:name', value) // 変更イベントを発生 } // vendor変更時の処理 ...(6) function updateVendor(value) { context.emit('update:vendor', value) // 変更イベントを発生 } return { updateName, updateVendor } } } </script>
<template>部の機種名(1)とメーカー(2)を入力する<input>タグでは、v-bind:valueディレクティブにプロパティ(name、vendor)を、v-on:inputディレクティブに入力時のイベントハンドラーメソッド(updateName、updateVendor)を、それぞれ記述します。メソッドの引数には、入力値を表す「$event.target.value」を指定します。
<script>部では、まず(3)のpropsで、コンポーネント外部から指定できるプロパティ(name、vendor)を設定します。次にsetupメソッド(4)の第2引数で、後述するemitメソッドを提供する変数contextを受け取ります。なお、第1引数のpropsは前回記事で説明したプロパティ変数ですが、このサンプルでは利用しません。
nameやvendorが変更されたときの処理(5)、(6)では、context.emitメソッドでイベントを発生させます。第1引数はイベント名で「update:<プロパティ名>」とします。第2引数は変更後の値です。
以上の実装により、コンポーネントを利用する側で「v-model:name」「v-model:vendor」ディレクティブによる双方向データバインディングが利用できるようになります。