Vue.js 勉強メモ 4 (TypeScript で！！)

ということで以下のドキュメントを読んでいきます。

jp.vuejs.org

英語のドキュメントも読むのはいいけど、最初の勉強では英語の読解とターゲット技術の読解の二重苦になるので、母国語ドキュメントがあるのは凄く理解のスピードが速いのでありがたい。

Vue.js のアプリは Vue クラスのインスタンスがいる。こんな感じで new して使う。

import Vue from 'vue'

const app = new Vue({
  
});

んで、特に重要なのが data プロパティ。ここに渡したオブジェクトのプロパティが監視されて値を書き換えるとテンプレートに従って見た目も更新されるみたいですね。

import Vue from 'vue'

const app = new Vue({
  data: {
    // ここのプロパティが変わると紐づく見た目も変わる
    prop1: 'hoge',
    prop2: 'boo!!!',
  }
});

なので、見た目に反映させたいデータ突っ込むプロパティは初期値が特になくても定義が必要ということです。freeze に関する説明もドキュメントにはあるけど、これは頭の片隅に入れておけばいいと思った。

Vue クラスには $ で始まる特別なプロパティがある。$el, $data, $watch あたりが紹介されてる。 API リファレンスを見ると、それ以外にも親を取るための $parent やルートをとるための $root とかもあります。

へ～って思ったのが $watch を使って以下のようにプロパティの監視をしている場合に…

var unwatch = app.$watch('prop1', function (newValue, oldValue) { });
unwatch();

こんな風に $watch 関数の戻り値の関数を呼ぶと監視が解除されるっていうところです。C# でいう IDisposable とかみたいな型があるわけじゃなくて関数が返ってくるのね。

そのほかにも $on でイベントハンドラーを登録して $emit でイベント発火っていうのは知ってたけど $once で一度だけ実行されるイベントハンドラーとか登録できるものがあった。便利そう。

ライフサイクル

Vue クラスのライフサイクルをフックするためのコールバックも指定できる。

import Vue from 'vue'

const app = new Vue({
  data: {
    // ここのプロパティが変わると紐づく見た目も変わる
    prop1: 'hoge',
    prop2: 'boo!!!',
  },
  created: function() {
    // 作成時
  },
  destroyed: function() {
    // 破棄時
  }
});

ドキュメントに記載にある図が凄くわかりやすい。

Vue インスタンス — Vue.js

順番としては以下の順番で呼び出されるみたい。

beforeCreate
created
beforeMount
mouted
beforeUpdate : マウント後に値が更新されるタイミングの前に呼ばれる
updated ; マウント後に見た目が更新された後に呼ばれる
beforeDestroy
destroyed

これだけあればいい感じに色々できそう。

JavaScript のややこしいところ

ここで JavaScript の初見殺しだと思ってる this が状況によって変わる問題についての言及があった。 JavaScript は呼び出し側が this を指定することが出来るんだけど、どうも Vue.js は、これを使ってライフサイクルや $watch のコールバックの this を Vue のインスタンスにしてるみたいだけど、他の言語と同じように this が勝手に変わらないアロー関数（() => { ... }）を使うと this が思ったのと違うのになってつらいということみたい。

個人的にはアロー関数のほうが好きだけど、ここでは使えない (this 使わないんならいらないけど、大体 Vue クラスのインスタンスのプロパティを書き換えたいよね) ってことで覚えておこう。