テキストボックスに数値を入れると、それを加算するという機能を実装するとします。
JavaScript(+JQuery) で普通に実装すると、こんな感じになるでしょうか。
テキストボックスになにか入力されたら、すべてのテキストボックスの値を足して、labelにその内容を反映させるというものです。
設計や開発を行っていると、**ある値をベースとしてそこから算出される値**というものはよくあります。
データベースの正規化でいうところの導出項目というやつです。
Vue では、こういったケースに対応する **算出プロパティ** という機能があります。
この computed がそれです。HTMLテンプレート中では、data の項目のように扱えますが、その正体は何らかの値を返す関数です。
上記例では value1～3 までの値を足し算して返しています。
jQuery 版とは、以下が異なります。
- value1～3 が変化したことを検知するコードを書く必要はない
- sum の結果はキャッシュされ value1～3 が変化したときだけ再計算される