最近お腹周りのお肉が気になりまして、２,３年前までは摘むことができなかったお腹が摘めるように…。
一念発起し、筋トレを始めたむつたくです。
娘も手伝ってくれて、負荷を(主に乗ってきます…)掛けてくれます。良い意味で筋肉が悲鳴をあげてます。

 

さて、今回ですが、前回のブログでAPI呼び出しとかを〜とお伝えしてましたが、それよりも大事なライフサイクルやcomputed、methodsとかのことを説明した方がいいなと思いまして、急遽変更致します。
ここを理解しないと、なんでこうなる？？？というのが多発すると思います。

 

それともう一つ！
chromeを使用している方はVue.js devtoolsを追加しておくとリアクティブの状態とか可視化できますので、少し幸せになれます。

 

 

項目

• Vue.jsのライフサイクル

– Vueインスタンス生成
– DOMへのマウント
– データ変更／画面の更新
– Vueインスタンス破棄
– エラー捕捉

• createdとmountedのユースケース
• 算出プロパティと監視プロパティ(computed/watch)

– 算出プロパティ(computed)
– 監視プロパティ(watch)

 

• メソッド(methods)

 

今回は、上記４つのことについて触れていきますね。

 

Vue.jsのライフサイクル

ライフサイクルというのは、インスタンスが生成(初期化)されてから破棄されるまでのことになります。
Vue.jsでは以下のサイクルになってます。

Vue.jsのライフサイクルは上の画像でもわかるように４段階と記載はされていませんが、error出力に関する１つに分かれてます。

 

(1) Vueインスタンスの生成(初期化)

発生フック：  beforeCreate   created 

１段階目です。

[cc_html]


[/cc_html]

 

moutedのユースケース

プラグインの初期化を行う

便利なJavaScriptライブラリがたくさんありますが、基本的にターゲットとなるDOMが描画されてないといけません。createdではまだ描画されてませんよね？アクセスできないので、mountedに初期化処理を書きます。

また、Ajax通信をここで行ってもいいのですが、DOMにアクセスする必要があるものに対してだけに限定した方が良いです。描画されてないからエラーに・・・なんてことも有り得ます。

 

 

算出プロパティと監視プロパティ(computed/watch)

(1) 算出プロパティ(computed)

算出プロパティとは、プロパティなのに関数も使えるという不思議な機能です。
関数の演算結果をプロパティの値として用いるという特徴を持ちます。
また、値をキャッシュしますので、値に変更が無いとキャッシュされたものがそのまま使用されるので、描画の処理時間が短縮できます。
ただし、引数を使用しますと、依存関係がなくなってしまうので、毎回再描画するハメになります。

 

算出プロパティのメリットは、加工したデータを渡す事(getter)、任意の加工をしてデータを保存する事(setter)、
そしてtemplate内の可読性が高まることです。

 

(2) 監視プロパティ

データや算出プロパティの状態を監視して、変化があったとき登録した処理を自動実行します。
つまり、データの変化をトリガにしたフックです。

データ変化であれば、算出プロパティのsetter/getterで十分かと思いますが、非同期やコストの高い(重い)処理を実行したいときに最も便利だと思います。

 

 

メソッド(methods)

振る舞いは基本的に算出プロパティと同様です。
違いは、算出プロパティはデータ変更がトリガなのに対し、methodsは、DOMイベントを呼び出す際に
 v-on  ディレクティブを使用します。また、値をキャッシュしないので、同じ結果になることになっても、毎回処理が実行されることになります。
また、v-onは省略できます。

[cc_html]



[/cc_html]

 

算出プロパティ(computed)とメソッド(methods)の違いは以下の感じでしょう。

 

テンプレート

[cc_html]

[/cc_html]

 

スクリプト

[cc_javascript]

[/cc_javascript]

 

テキストを入力すると、ログにcomputedとmethodsの両方が出力されます。
では、ボタンをクリックするとどうでしょう？

 

すると、computedは実行されず、methodsだけが実行されているのがわかります。
しかし、incrementCountを実行したのに、textの内容もログに表示されています。
このようにmethodsは依存関係にないプロパティが変更された場合でも実行されてしまうことが分かりました。

 

 

---

以上となります。
簡単に説明していきましたが、詳細は公式ドキュメントを参照してください。
では、またの機会に！