こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら
独学でフロントエンドエンジニアを目指している人へ
フロントエンドの仕事を得るまでにどんな勉強をしたら良いのかをまとめました！！
興味ある方は是非ご覧ください。
プログラミング 完全初心者 何から勉強すれば良いか分からない。 具体的にやることを教えて欲しい。 こういった疑問に答えて、フロントエンドエンジニアになる為の具体的な勉強プランについて解説しています[…]
はじめに
今回説明していくのは「method」と「computed」になります。
methods
methodsとは
コンポーネントオプションの1つです。
Vueインスタンスに対してデータオブジェクトを渡してくれます。
同じデータオブジェクトとしてはpropsやdata、computedなどがあります。
それぞれ違いはありますが、大まかな区分として初期状態やデータはpropsやdata。
関数チックな処理はmethodsかcomputedを使うケースが多いです。
methodsの使い方
methodsはメソッドなので呼び出しには引数が必要です。
以下の様に呼び出し可能です。
{{ メソッド名() }}
<!-- 又は --!>
<button @click="メソッド名">ボタン</button>コンポーネント内に以下の様に書きます。
mathod:{
メソッド名:functon(event){処理},
メソッド名:functon(event){処理},
・・・・}
methodsの実用例
今回のコードはv-on:clickでhelloというメソッドを用意して、処理はmethods部分に書いています。
ボタンをクリックすると、アラートとして「hello+現在のtext+！」が表示されます。
<div id="example">
<button v-on:click="hello">HELLO</button>
</div>
<script>
var example = new Vue({
el: '#example',
data: {
text: 'Vue.js'
},
methods: {
hello: function (event) {
alert('Hello ' + this.text + '!')
if (event) {
alert(event.target.tagName)
}
}
}
})
</script>computed
computedとは
computedは算術プロパティと呼ばれています。
基本的にmethodと同じように定義できるコンポーネントオプションです。
methodsとの違いは後ほど説明します。
computedの使い方
computedの呼び出しはdataの様に行えます。(引数の必要なし)
<h1>Hello {{関数名}}!</h1>Vue側では以下の様に定義します。methodsと定義の仕方は全く一緒です。
computed:{
関数名:functon(){処理},
関数名:functon(){処理},
・・・・}
methodsとcomputedの違い
methodとcomputedの違いを以下に簡単にまとめていきます。と言っても公式のドキュメントにも詳しく書いてあるので、その要約の要約を。
Vue.js - The Progressive JavaScript Framework…
- computedはプロパティ、methodsはメソッド
- computedは依存関係に基づいてキャッシュされる。つまり関係ない値の変化では処理は走らない。methodsは処理が呼び出さるとその度に処理が走る。
methodsとcomputedの使い分け
基本的なイベント処理はcomputedがおすすめです。methodsの場合は他の値が変わる度に再描画される為、重くなりやすいからです。
methodsを使うのは以下の様なシュチュエーションです。
Vueインスタンスのデータじゃないものを処理に含む場合
Vueインスタンス以外のデータの変化ではcomputedは走ってくれません。なのでmethodsを使いましょう。
例としては、Dateオブジェクトを使って今の日時を返したい場合など。methodsを使えば、その都度の時間に合わせた表示をしてくれます。
まとめ
今回はVueのコンポーネントオプションである、computed、methodについてまとめていきました。
これらを使いこなせると様々な処理を加える事ができる為、動きのあるアプリケーションが作れる様になります。