vue.js, ただ表示する部分に使う関数について

Question

https://codepen.io/anon/pen/YvQaVq
こちらのURLを参考に似たような機能を持つ物を作る
→その中で疑問点あり

//htmlファイル、合計金額表示部分
<span>Total:</span> <span>{{total()}}</span>

//JSファイルtotal関数
total: function() {
      var total = 0;
      
      this.services.forEach(function(s) {
        if (s.active) {
          total += s.price;
        }
      });
      
      return total;
    }

①なぜただ表示する部分を関数にできるのか？ @click, @changeなどだといつmethodが実行されるか分かるが、この場合いつ？？(computedの役割なのかなぁ～っとうっすら思っておりますが）

②JS側のthis.services.forEach(function(s)はmethodに引数が渡されていないが、どうやってsを受けとっているのか？？

よろしくお願いいたします。

Answer 1

total()は、codepenの内容を見る限り computed ではなく methods で定義されていますが、
この関数がいつ呼ばれるかというと、再描画が行われたときとなります。

一方 computed で定義された関数は dataプロパティの変数に対して何らかの処理を加えて表示させるものです。この時依存する dataプロパティの値が変化したときに呼ばれることになります。

this.services.forEach(function(s)　ですが、this.servicesは配列になっています。
この配列を forEachすることで全件繰り返しを行うのですが、その時に s には先頭から1件ずつ渡していくということを行います。

Comments

[kazoogon]

totalの値が変わった時(=totalの値が再描画)に呼ばれる関数？？なのでしょうか？？
しかし「totalの値が変わった時」これはどう判断しているのでしょう。。

[euledge]

totalの値が変わった時ではないです。
total()の中で使用しているservicesの値が変わったときです。

この「管理している値が変わったとき」を監視しているのがVueJSや似たようなReactJsなどのライブラリがやってくれているところです。
下記のガイドにリアクティブの探求というページがあるのでそこに少し書いてあります。
https://jp.vuejs.org/v2/guide/reactivity.html

[kazoogon]

dataに保管してあるserviceの値が変わるのを常にvueはwatchしている
↓
total()関数のserviceの値が変更 = total関数が起動　　

ということですね、勘違いなければいいですが。。

[euledge]

その認識であっています