Vue.js の基本 (7)

テキストボックスに数値を入れると、それを加算するという機能を実装するとします。
JavaScript(+JQuery) で普通に実装すると、こんな感じになるでしょうか。

テキストボックスになにか入力されたら、すべてのテキストボックスの値を足して、labelにその内容を反映させるというものです。

設計や開発を行っていると、ある値をベースとしてそこから算出される値というものはよくあります。 データベースの正規化でいうところの導出項目というやつです。

Vue では、こういったケースに対応する 算出プロパティ という機能があります。

この computed がそれです。HTMLテンプレート中では、data の項目のように扱えますが、その正体は何らかの値を返す関数です。
上記例では value1~3 までの値を足し算して返しています。

jQuery 版とは、以下が異なります。

  • value1~3 が変化したことを検知するコードを書く必要はない
  • sum の結果はキャッシュされ value1~3 が変化したときだけ再計算される