Vue.jsでは「new Vue」や「Vue.component」等の構文によって、コンポーネントを作成することができます。
作成したコンポーネントは下記のようなライフサイクルをたどります。
参考：https://jp.vuejs.org/v2/guide/instance.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0
そもそも「ライフサイクル」とは？
Vue.jsで、コンポーネント（Vueインスタンス）が出来てから、終了するまでのデータの流れのことです。
| ライフサイクル | 説明 |
|---|---|
| beforeCreate | Vueインスタンスが生成されて、リアクティブデータが初期化される前 |
| created | Vueインスタンスが生成されて、リアクティブデータが初期化された後。Vueインスタンス自身を指すthisへアクセスできるようになります。他には、Vuexを導入していない小規模アプリにおいてWeb APIと通信してデータに関する処理を開始したり、setIntervalやsetTimeoutで繰り返し実行するタイマー処理の開始ポイントとしても利用されます。 |
| beforeMount | VueインスタンスをDOMにマウントされる前、DOMが構築される前になります。 |
| mounted | VueインスタンスをDOMにマウントされた後、DOMが構築された後になります。$elプロパティやDOM API等のDOM操作やイベントリスナー登録等が行いたい場合はこのフックに登録します。 |
| beforeUpdate | データが変更されて、DOMに適用される前 |
| updated | データが変更されて、DOMに適用された後 |
| beforeDestroy | Vueインスタンスが破棄される前、イベントリスナーの破棄、タイマー処理のクリアのポイントとして使われます。もし適切に行わないとメモリリークの原因になるので注意しましょう。 |
| destroyed | Vueインスタンスが破棄された後 |
| errorCaptured | 任意の子孫コンポーネントからエラーが補足された時 |
Vueインスタンスとは？
「new Vue」にて作成したオブジェクトのことです。
DOMとは？
HTMLのドキュメントにアクセスするためのAPIのことです。
Vue.jsで言えば、elオプションで指定した要素のことです。
「$el変数」や「getElementById()」にてDOMにアクセスすることができます。
Vueクラスの役割
「Vue.js」のコアクラスとしては、「Vueクラス」になります。
モジュールとしての役割
Vue.jsのAPIを束ねる名前空間としての役割
コンストラクタとしての役割
コンストラクタとしては下記になります。
|
1 |
new Vue({動作オプション:値}) |
Vueクラスを作る対象
基本的には、「入力フォーム」等、操作したい対象に対して１つVueクラスを作ります。
動作オプション
| オプション | 説明 |
|---|---|
| el | コンポーネントのインスタンスをどのHTMLに結びつけるか定義します。Vue.jsを有効化させるセレクタです。 |
| data | コンポーネントが持つデータです。オブジェクト、配列も登録できます。 |
| filters | コンポーネントが持つフィルタ |
| computed | コンポーネントが持つ算出プロパティです。処理した結果をデータとして返します。 |
| methods | コンポーネントが使用するメソッド |
| watch | コンポーネントが持つウォッチャ |
| template | そのままタグごとHTMLのテンプレートの中に流し込む事が可能です。基本は使わない。 |
| ライフサイクルフック | 決まったタイミングで処理を割り振らせることができます。 |
「テンプレート側（HTML)」で、「dataオプション」に用意した値を利用します。これを「データバインディング」と呼びます。
data
データのプロパティは、後から追加することができないので、値が決まっていない場合でも空のプロパティ値を設定しておく必要があります。
methodsとcomputedの違い
methods
メソッドなので、呼び出しに（）が付く。
キャッシュされないので、日時の計算等何度も呼び出したい処理に対して使う。
computed
プロパティなので、呼び出しに（）が付かない。
キャッシュされるので、一度だけ呼び出した方が良い処理に関しては、コチラを優先して使う。
ライフサイクルフック
上で解説したライフサイクルフックを定義して、決まったタイミングに処理を割り込ませることです。
templateプロパティとは？
そのままタグごとHTMLのテンプレートの中に流し込む事が可能です。Vue.jsのViewの作り方の一つになります。全部丸々テンプレートを上書きしてしまう性質を持つので基本的には使わない機能にはなりますが、こういう機能もあるのだということを認識しておくことは重要です。
例
「<p>こんにちはテンプレートです。</p>」が「<div id="app2"> </div>」のなかに挿入されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="app2"> </div> <script> const txt = "テキスト"; let vm2 = new Vue({ el: "#app2", data: { message: "テスト", text: txt }, template: '<p>こんにちはテンプレートです。</p>' }) |
$mountを簡単に記述できる。
通常の場合はVueインスタンスを格納した変数から$mountを呼び出して使用することになりますが、templateプロパティを使用することで末尾に$mountをつける事でマウントする事ができます。
|
1 2 3 4 5 6 7 |
new Vue({ data: { message: "テスト", text: txt }, template: '<p>こんにちはテンプレートです。</p>' }).$mount('#app2') |
外側からVueインスタンスにアクセスするには？
一旦変数にVueインスタンスに格納すれば別のインスタンスで参照や更新をかける事ができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<div id="app"> {{animals}} </div> <div id="app2"> <button @click="click">ボタン</button> </div> <script> let vm = new Vue({ el: "#app", data: { animals: ['dog', 'cat', 'lion'], }, methods: { remove: function () { this.animals.shift(); } } }) new Vue({ el: "#app2", data: { message: "テスト" }, methods: { click: function () { console.log(vm.animals); } } }) </script> |
Vueインスタンスの各オプションを取得や設定するには？
個別のdata値等は取得できるかと思いますが、個別のオプション等を取得したい場合は下記のように指定します。
| オプション名 | 取得や設定方法 |
|---|---|
| dataの取得 | this.$data(外側から取得する場合はVueインスタンスを格納した変数.$data) |
| elの設定 | 「Vueインスタンスを格納した変数.mount('#app')」とすれば設定できます。 |
基本的に、Vueインスタンスはユーザーが使うプロパティと区別するためにそれ以外のプロパティについては$がついています。
この記事へのコメントはありません。