【Vue.js 入門】computed オプションの使い方

Vue.js

今回は、computed オプションについて紹介します。


Vue.js の書き方を最初から知りたいという方はこちら(^^)



参考書

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ!!
Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです!Vue.jsのツボとコツがゼッタイにわかる本...

computed オプションとは

Vue のコンポーネントが持ついくつかのオプションの中の一つです。

このオプションには算出プロパティを定義します。
算出プロパティとは、何らかの加工を行った結果を返すプロパティです。

通常のプロパティと同じように扱えるので、マスタッシュ構文で出力したり、v-for でデータを繰り返し出力することも可能です。

computed オプションの使い方

computed: { 算出プロパティ: 関数オブジェクト }



サンプルでは、入力した数の階乗を求める算出プロパティを作ってみます。

<div id="app">
  <input type="number" v-model="number">の階乗 → {{kaijou}}
</div>
var app = new Vue({
  el: '#app',
  data: {
    number: ''
  },
  computed: {
    kaijou: function() {
      var ans = 1;
      for (var i = 1; i <= this.number; i++) {
        ans *= i;
      }
      return ans;
    }
  }
});

v-model について軽く説明しておくと、フォームの入力値をデータにバインドさせています。

ここでは、入力した数値が data オプションの number プロパティの値に入るわけですね。

数値を入力すると、計算結果が瞬時に表示されます。


また、マスタッシュ構文に算出プロパティを書くことができるということがこれで確認できました(^^)

算出プロパティはキャッシュされる

算出プロパティが参照されたとき、 Vue はその値をキャッシュ(記憶)し、再び同じ算出プロパティが参照されたときはキャッシュから値が取り出されます。

同じ処理を省くためですね。

しかし、算出プロパティの中で使っているリアクティブデータが更新されると、キャッシュを破棄して再度実行されます。

※リアクティブデータとは
データの変化がすぐDOMに反映される仕組みをリアクティブシステムといい、そのシステムの監視下にあるデータをリアクティブデータと言います。



算出プロパティがキャッシュされる様子を確認するため、以下のサンプルでは0~99からランダムに整数を出力します。

比較のため、メソッドでも同様の出力を用意します。

<div id="app">
  <p v-if="isTrue">
    {{ randomNumber1() }} ← メソッドで出力<br>
    {{ randomNumber2 }} ← 算出プロパティで出力
  </p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    isTrue: true
  },
  methods: {
    randomNumber1: function() {
      return Math.floor( Math.random() * 100 );
    }
  },
  computed: {
    randomNumber2: function() {
      return Math.floor( Math.random() * 100 );
    }
  }
});

ブラウザには、以下のように表示されました。


では、v-if=”isTrue” の isTrue プロパティの値をコンソールで false に替えます。

v-if の条件式が false になったので、ブラウザには非表示になりました。


そして、再度 true に戻して表示させます。

すると、ブラウザには以下のように表示されました。


メソッドで出力した数は、18→85と更新されていますが、
算出プロパティで出力した数は変化がありません。

このサンプルの算出プロパティはリアクティブデータを持っておらず、キャッシュが参照されたため同じ数が出力されたことが確認できました。


ちなみに、メソッドは描画が発生する度に実行されるため、数字が更新されています。




今回は以上です。
ご覧いただきありがとうございました(^^)

続きはこちら↓




参考書

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ!!
Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです!Vue.jsのツボとコツがゼッタイにわかる本...

コメント

コンタクトフォーム

    タイトルとURLをコピーしました