Vueの主要なプロパティ・ディレクティブまとめ

プロパティ
data
ここではidを設定したり、表示されるデータをとり扱う。
 

computed
computedプロパティは、computedプロパティのなかに記述されている変数が変更された場合のみに実行される。それ以外の場合は１度実行してキャッシュしたデータが返される。
関連するデータが変更されない限り１度実行してキャッシュしたデータが返されるので、変更がなければ処理（関数など）は再実行されない。あくまでもcomputedプロパティは、処理を加えたデータをプロパティとして提供したい場合に使うようにすること。
 

methods
v-onなどで使われるメソッドを定義する。もちろんv-on以外のディレクティブでも使われるが、v-onディレクティブで設定したメソッドをトリガーとして、methodsプロパティ内のメソッドを実行することが多い。
「this」を使えば、Vueインスタンスが持っているデータへアクセスしたり書き換えたりすることができる。（dataにあるプロパティとか変数とか）
 validate
paramsなどの値が数値／文字列であることをvalidate（検証）する
これがあるおかげでparamsの値の種類の違いによる思わぬエラーを防ぐことができる
正規表現などを用いて検証することが多い（？）
 

mutations
Vuexで状態管理をする場合、子コンポーネントからVuexのStoreに記述されたデータのプロパティなどを直接加工／変更するのは思わぬエラーを引き起こすので避けるべき
そこで、VuexのStoreに記述されているデータのプロパティなどを加工して子コンポーネントで使いたいと思った時はmutationsを使う
mutationsを使ってVuexのStoreにあるデータにアクセスして、加工されたデータを受け取る。これで安全にデータの加工／変更ができる
例えば、VuexのStoreにあるdataのmessageプロパティに「単にアクセス」したいと思った時は、子コンポーネントで「this.$store.state.messge」と書けばmessageプロパティにアクセスできる。
しかし、「加工する」際は「this.$store.commit(todos/add, e,target.value)」みたいな感じになる。