Vue インスタンス

コンストラクタ

全ての Vue vm は、Vue コンストラクタ関数でルート Vue インスタンス(root Vue instance)を作成することによって起動されます:

var vm = new Vue({
// オプション
})

Vue のデザインは、MVVM パターンと厳密には関連が無いものの、部分的には影響を受けています。慣例として、よく vm (ViewModel の略) を Vue インスタンスの変数名として、よく利用します。

Vue インスタンスを生成するには、オプションオブジェクトを渡す必要があります。これには、データ、テンプレート、マウントさせる要素、メソッド、ライフサイクルコールバックなどをオプションとして指定することができます。全てのオプションの一覧はAPI リファレンスで参照できます。

Vue コンストラクタを拡張することで、あらかじめ定義されたオプションを伴う再利用可能なコンポーネントコンストラクタを生成できます:

var MyComponent = Vue.extend({
// 拡張オプション
})
// `MyComponent` から生成された全てのインスタンスは、あらかじめ定義された拡張オプションを利用して生成されます
var myComponentInstance = new MyComponent()

プログラムから命令的に拡張されたインスタンスを生成できますが、ほとんどの場合は、カスタムエレメントとしてテンプレートに宣言的に組み立てることをおすすめします。後ほど コンポーネントシステム で詳細を説明します。今は、全ての Vue コンポーネントは、本質的に Vue インスタンスを拡張したと理解しておけば十分です。

プロパティとメソッド

Vue インスタンスは、自身の data オブジェクトの全てのプロパティをプロキシします:

var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// プロパティへの代入は、元のデータにも反映されます
vm.a = 2
data.a // -> 2
// ... そして、その逆もまたしかりです
data.a = 3
vm.a // -> 3

これらのプロキシされたプロパティだけがリアクティブなことに注意しましょう。もし、インスタンスを生成した後にインスタンスに新しいプロパティを追加した場合には、ビューの更新は起こりません。後ほど、リアクティブシステムの章で詳細を説明します。

data プロパティに加えて、Vue インスタンスは、いくつかの便利なプロパティとメソッドを持っています。

var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch はインスタンスメソッドです
vm.$watch('a', function (newVal, oldVal) {
// このコールバックは `vm.a` の値が変わる時に呼ばれます
})

インスタンスプロパティまたはコールバック(例: vm.$watch('a', newval => this.myMethod())) 上でアロー関数 を使用しないでください。アロー関数は親コンテキストに束縛されるため、this は期待どおりに Vue インスタンスにならず、そして this.myMethod は undefined になります。

インスタンスの全てのプロパティとメソッドのリストは、 API リファレンス を参照してください。

インスタンスライフサイクルフック

各 Vue インスタンスは、生成時に一連の初期化を行います。例えば、データの監視のセットアップやテンプレートのコンパイル、DOM へのインスタンスのマウント、データが変化したときの DOM の更新などがあります。その初期化の過程で、カスタムロジックの実行を可能にする、いくつかの ライフサイクルフック(lifecycle hooks) を呼び出します。例えば、created フックはインスタンスが生成された後に呼ばれます。

var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` は vm インスタンスを指します
console.log('a is: ' + this.a)
}
})
// -> "a is: 1"

この他にもインスタンスのライフサイクルの様々な段階で呼ばれるフックがあります。例えば、mounted, updated, destroyed があります。全てのライフサイクルフックは、this が Vue インスタンスを指す形で実行されます。Vue の世界における “コントローラ” の概念について知りたい方もいるかもしれません。その答えとしては「コントローラはない」です。コンポーネントのためのカスタムロジックは、これらのライフサイクルフックの中に分割されることになります。

ライフサイクルダイアグラム

以下は、インスタンスライフサイクルのダイアグラムです。
今はこのダイアグラムを完全に理解する必要はありませんが、将来役に立つことでしょう。

Lifecycle