Vue.jsのオプション構成(インスタンスのプロパティ)

Vue.jsのオプション(プロパティ)

ここでは、Vue.jsのオプション構成(インスタンスのプロパティ)について紹介します。

Vue.jsのアプリケーションでは、Vue.jsのバージョン2以前ならVueクラス(Vue関数)、Vue.jsのバージョン3以降ならcreateAppメソッドでインスタンスを生成するところから始まります。

インスタンスの中で使用するデータ(属性)やメソッド(振る舞い)は、あらかじめインスタンスの引数(Vueクラスのコンストラクタの引数、またはcreateAppメソッドの引数)として渡します。

引数は単純な数値や文字列値などのリテラル値では扱いきれないため、役割に応じた名前を持つプロパティとして、オブジェクト表記で定義されます。
そのため、Vueクラス、createAppメソッドは、「new Vue(a, b, c…)」「createApp(a, b, c…)」の形式ではなく、引数にオブジェクトを受け取ることになっています。

Vueクラスの書式とcreateAppメソッドの書式

Vueクラスの書式

createAppメソッドの書式

Vueインスタンスの引数として使用できるプロパティ

Vueインスタンスが持てる主なプロパティ(引数)には以下のものがあります。
ここでは、一覧表にまとめておきます。

プロパティ名 役割 備考
el VueインスタンスをどのHTML要素に結び付けるを定義 v2以前で使用
data Vueインスタンスが保持するデータ(状態)を定義する
methods Vueインスタンスのメソッド(振る舞い)を定義する
filters Vueインスタンスが持つフィルターを定義する v2以前で使用
computed Vueインスタンスが持つ算出プロパティを定義する
watch Vueインスタンスが持つウォッチャを定義する
components Vueインスタンスが持つコンポーネントを定義する
props コンポーネントが持つプロパティを定義する
emits コンポーネントが発行するイベントを定義する v3で追加
ライフサイクルフック Vueインスタンスのライフサイクルフック 下表を参照

Vue ライフサイクルフック

フック名 発生のタイミング 備考
beforeCreate Vueインスタンスが生成された直後に発生
created リアクティブデータを監視する準備が終わった時
beforeMount VueインスタンスがDOMと結びつく直前
mounted VueインスタンスがDOMと結びついた直後
beforeUpdate リアクティブデータが更新され、DOMに反映される直前
updated リアクティブデータが更新され、DOMに反映された直後
beforeUnmount Vueインスタンスのマウントが解除される直前 v3で追加
unmounted Vueインスタンスのマウントが解除された直後 v3で追加
beforeDestroy Vueインスタンスが破棄される直前 v2以前で使用
destroyed Vueインスタンスが破棄された直後 v2以前で使用

Vueクラスの書式とcreateAppメソッドの書式

Vueクラスの書式

createAppメソッドの書式

Vueのオプション構成

上記の表に示したプロパティ以外にも、独自のディレクティブを定義するdirectivesなど、多くのプロパティがVue.jsではサポートされています。
これらのプロパティは「オプション」と呼ばれており、Vue.jsの公式ドキュメントには

Vue インスタンスを生成するには、オプションオブジェクトを渡します。

と記載されています。

Vueオプション構成

Vueクラスの書式

createAppメソッドの書式

Vue.js 入門 Tips 一覧

参考

Vue.js オプション / データ(v2)
Vue.js オプション / データ(v3)