Vue.jsの基本（3）computedとmethodsの違い

JavaScript
2018.10.31

computedは日本語では算出プロパティと呼ばれています。
computedはdataプロパティに対して何らかの処理を行いたい場合に使用します。
computedの記述方法としては何らか処理をしたデータを返す関数として定義します。定義した関数はVueインスタンスのプロパティとして定義されますので、「this.」を使ったプロパティの呼び出しができます。

スポンサーリンク

computedの使い方

computedはVueをインスタンス化するときにコンストラクタ引数に記述します。

new Vue({
computed:プロパティ名:function(){
return 処理内容
}
})

HTML側の記述はマスタッシュでプロパティ名を記述します。

具体的な例として、numberの値を2倍にして表示する例です。

javascriptコード

var app = new Vue({el: '#app',
data: {number:100
},computed: {multiple: function(){return this.number*2}}})

HTMLコード

{{ multiple }}

computedの記述はメソッドそのものです。それではメソッドで記述しても同じではないかと考えられます。
そこで、同様の処理をメソッドで記述します。

methodsでの記述

メソッドを使って前述のサンプルと同様の結果を表示させます。

javascriptコード

var app = new Vue({
el: '#app',
data: {
number:100
},
methods: {
multipleMethod: function(){
return this.number*2
}
}
})

HTMLコード

{{ multipleMethod() }}

ほとんど記述に違いがありません。あえて言うならマスタッシュの中の記述がメソッド形式になっただけです。

computedとmethodsの違い

基本的な違いはcomputedはプロパティでmethodsはメソッドです。したがってマスタッシュの中に記述する場合、上の例ではcomputedは「{{ multiple }}」と記述しましたが、methodsは「{{ multipleMethod() }}」と記述します。

computedはプロパティですから、getterとsetterが使えます。一方methodsはメソッドですからgetterしか使えません。

さらにcomputedはキャッシュされますが、methodsはキャッシュされません。

次の例はcomputedとmethodsにそれぞれ同じように乱数を発生させています。
その結果をそれぞれ複数回表示させて確認すると、computedはキャッシュされますので乱数は同じ値になり、methodsは毎回関数が実行されますので乱数の値は違っているのが確認できます。

キャッシュを試すコード
javascriptのコード

var app = new Vue({
el: '#app',
data: {
number:100
},
computed: {
random: function(){
return Math.random()
}
},
methods: {
randomMethod: function(){
return Math.random()
}
}
})
スポンサーリンク
タイトルとURLをコピーしました