Vue.js computed(算出プロパティ)の使い方

Vue.js computed(算出プロパティ)の使い方

Vueのcomputedの使い方の簡単なサンプルコードです。methodsとは違い実行結果がキャッシュされるのが特徴です。

環境

  • OS  CentOS 8.0.1905 (Core)
  • node v12.13.1
  • npm 6.13.2
  • @vue/cli 4.1.1
  • bootstrap-vue 2.1.0

Vue.js環境構築

vueappという名前でプロジェクトを作成

bootstrapを使用するため、srcディレクトリ配下のmain.jsを下記のように編集

computedの使い方

componentsディレクトリ配下のHelloWorld.vueを下記の通りに編集します。

npm run serveで起動後に、ブラウザから http://プライベートIP:8080 にアクセスするとComputedにより、Date.nowにより取得した値が表示されます。

Computedの方は算出された値がキャッシュされ、methods算出された値はキャッシュされていないことが確認できます。