KATUBLO | エンジニアの日常BLOG
2019年03月29日

【Vue.js】算出プロパティとは?簡単に解説してみた

こんにちは。KATUOです。

風邪もだいぶ治り、本日から復活です。2日ぶりのインターン出勤。この2日寝たきりだったので、体が持つかどうか心配ですが、がんばります〜

今回の記事では「Vue.jsの算出プロパティ」について書いていこうと思います。

 

 

算出プロパティとは?

vueの公式参考書を読んでいて、見つけたのですが、自分自身初めて目にする用語。ちょっと立ち止まって調べて見ようと思います。

 

算出プロパティを使う利点

一応vueでは算術処理、複雑な処理などをテンプテート内でも記述することができます。ですが、大規模開発などでこのように記述したらどうなるでしょうか?想像はつくと思いますが、管理がめちゃくちゃ大変になります。そこで生まれたのが算出プロパティというもので、算術処理にまつわる部分を別途、名前をつけて、テンプレート内に記述することで、管理のしやすい状態にすることができます。

 

算出プロパティは処理が爆速

算出プロパティは実行した部分の処理をキャッシュ化するので、処理が非常に速いです。ここが大きな違いといっていいでしょう。よってvue.js内で算術処理、複雑な処理を記述する場合は必ず算出プロパティを用いましょう。

 

算出プロパティを実装してみる

vue公式サイトから、プログラムを引用して解説していく。

 

 

 

算術プロパティはcomputed内に記述します。行なっている処理としては文字をひっくり返すというjavascriptsの処理ですね。

 

 

参照: 「算出プロパティとウォッチャ」

 

 

まとめ

インターン先でvueを触っていましたが、computed内で書かれている処理が算術プロパティで今回紹介したような利点を持っていることはわからなかったので良い勉強になりました。

 

最後まで読んで頂き、ありがとうございました。
SNS等でのシェアが頂ければ幸いです!

プロフィール

@KATUO

現在都内私立大学に通う大学4年生。大学では電気電子工学を専攻。大学2年の夏頃に、プログラマーの長期インターン募集の広告が目に止まり、独学でプログラミングの学習を開始。現在は「ToC向け大規模サービスを運営するメガベンチャー」と「AIスタートアップ」でインターンで修行中。2020年4月からwebエンジニアとして社会人生活スタート。

Twitterアカウント

広告

スポンサー