はじめに
この記事ではVue.js2を使っています。
初学者のため、至らない部分や間違い等あればご教授よろしくお願いします。
Vue.jsを勉強しているとcoumputedプロバティが出てきてあれ、これmethodプロバティでいいんじゃない？ってなったので違いはどこにあるのか調べてみました。
結論
coumputedプロバティは、依存関係にもとづきキャッシュされる
methodプロバティは、描写が変わるたびに実行される
動きを確認してみる
とは言っても、文字だけだと難しいという方は続きをご覧ください。
プログラムの仕様
coumputedプロバティとmethodプロバティの挙動を確認します。
・number が３以下の時に"３以下"を表す
・number が３以上の場合は"3より上"を表す
index.html
<!-- Vue.jsのインストール -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p>{{ number }}</p>
<button @click="number += 1">+1</button>
<!-- coumputed -->
<p>coumputedプロパティ->{{ Coumputed }}</p>
<!-- method -->
<p>methodプロパティ->{{ Method() }}</p>
</div>
new Vue({
el: "#app",
data: {
number: 0,
},
//coumputedプロパティ
computed: {
Coumputed: function() {
return this.number > 3 ? "3より上" : "３以下"
}
},
//methodsプロパティ
methods: {
Method: function() {
return this.number > 3 ? "3より上" : "３以下"
}
}
})
結果
結果は同じ挙動となりました。
methodプロパティでもcoumputedプロパティと同じ挙動となりました。
ソースの追加
関数がいつ実行されているかを確認してみます。
<追加点>
・index.htmlにohternumberを追加
・console.logを追加
index.html
<!-- Vue.jsのインストール -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p>{{ number }}</p>
<button @click="number += 1">+1</button>
<!-- 追加 -->
<p>{{ othernumber }}</p>
<button @click="othernumber += 1">+1</button>
<!-- coumputed -->
<p>coumputedプロパティ->{{ Coumputed }}</p>
<!-- method -->
<p>methodプロパティ->{{ Method() }}</p>
</div>
new Vue({
el: "#app",
data: {
number: 0,
//追記
othernumber: 0,
},
//coumputedプロパティ
computed: {
Coumputed: function() {
//追記
console.log("Computed");
return this.number > 3 ? "3より上" : "３以下"
}
},
//methodsプロパティ
methods: {
Method: function() {
//追記
console.log("Methods");
return this.number > 3 ? "3より上" : "３以下"
}
}
})
結果
coumputedプロバティは、依存関係にもとづきキャッシュされ、methodプロバティは、依存関係にない場合でも描写が変わるたびに実行されていました。
numberを押した場合
coumputedプロバティもmethodプロバティも挙動を確認できました。
othernumberを押した場合
methodプロパティが実行されており、依存関係にない場合でも描写が変わるたびに実行されてることが分かりました。
最後に
coumputedプロバティ
インスタンスに持たせて参照できるようにしたいときに用いる
methodプロバティ
クリック時、マウスオーバー時等の何かアクションが起きた時に処理を行うような場合に用いることがいいようです。