Vueのwatchとcomputedの違いについて

Question

実現したいこと

簡単な計算機擬きを作りたいです。
1つの値に対して、複数の計算結果を求めたい場合にwatchとcomputedのどちらが向いているのでしょうか？

作るのは下記のような、数字が変更されるのを検知して、処理を実行し結果を出力するという簡単なものです。

    <div>Value: <input type="number" v-model="val"></div>
    <table>
      <tr><th>add:</th><td>{{add}}</td></tr>
      <tr><th>sub:</th><td>{{sub}}</td></tr>
      <tr><th>multiiple:</th><td>{{mult}}</td></tr>
      <tr><th>divide:</th><td>{{div}}</td></tr>
    </table>

watch:{
  val: function(value) {
    this.val = value;
    // parseInt
    // 文字列を整数に変換する関数
    var val = parseInt(value);
    this.val = parseInt(value);
    this.add = Math.floor(val + 2);
    this.sub = Math.floor(val - 2);
    this.mult = Math.floor(val * 2);
    this.div = Math.floor(val / 2);
  }
},

computedで実現させたい

watchでは、簡単に処理ができました。
が、これcomputedでもできるんじゃね？と思い、いろいろ試行錯誤したのですが、できませんでした。
もし、実現可能なのであれば、教えてください。

できない、もしくは向いていないのであれば、その理由をお聞かせいただければ幸いです。

Answer 1

コードが無いのでわかりませんが

算出プロパティ-vs-監視プロパティを見ると
watchからcomputedに変える方法がわかりやすいと思います

Comments

[Nero1129]

今、watchの部分のコードを追加しました。

ドキュメントを一通り読んだのですが、少し理解が及ばなかったです。
このドキュメントとやろうとしていることが少し違うので分かりづらいです。すみません。

[mouse_484]

computedのコードじゃないですか..?
computedでしたらwatchの引数をthis.valのように取得します
ですがこの様な場合はwatchで実装して良いと思います

[Nero1129]

すません。気が付いて、watchに書き直しました。
v-modelで値を取得しているのでわざわざwatchで監視せずとも、関数を実行できるのでは？と考えたのです。

[mouse_484]

算出プロパティ（computed)は
{{ val + 2 * 3 }} を {{ val }}にするとか言うときに使います

今回は数値の変更のたびに中身を変える必要があるようなのでwatchです

[Nero1129]

つまり、最終的に1つの値としてreturnする場合は、computedで算出
今回のような複数の値を返す場合は不向きというような認識でいいのでしょうか？

[mouse_484]

その認識で間違いないです

watchで変えた値をcomputedで算出して表示なんて方法もありますが

[Nero1129]

watchで値を取得しcomputedで算出する場合は、いくつか関数を生成する必要が出てきますよね？

[mouse_484]

関数が何を表しているかわかりませんが殆どの場合必要になります

HTML側を完結にしたいかどうかってところなのでそこは好みです

[Nero1129]

分かりました。
丁寧な解説ありがとうございました。
おかげさまで、すっきりしました。