タイトル: computed(算出プロパティ)と使い方とdataとの違い

SEOタイトル: 【Vue.js】computed(算出プロパティ)と使い方とdataとの違い

この記事の要点
Vue.js の `computed`（算出プロパティ）と `data` の違い `data`: 値そのものを保持 `computed`: 関数で値を計算、依存する data の変更を自動検知してキャッシュ `methods` と違い呼び出しごとに再計算しないのでパフォーマンスが良い

computedとは

computedはdataと違い、関数を用いて値を定義することが出来ます。

※dataに関してはこちらを参照。

html

value">

value is: {{ value }}

computed_value is: {{ computedValue }}

※valueとcomputedValueは変数名なので実際はなんでもいいです。

var app = new Vue({

el: '#app',

data: {

value: 'init value',

computed: {

computedValue: function() {

return "computed " + this.value;

})

上記の様にcomputedでは変数を関数で定義することができます。

今回は data の値に対して「computed 」という文字列を追加します。

以下、初期表示です。

appleと入力すると以下の様になります。