副作用って結局何なのさ。

最近、vue.jsの文脈で人にcomputedとmethods（と、data)について語る時に思いついた例がいい感じだったので、メモ。

公式読んだら理解できる人とかではなく、

<template>
  <div>税込価格　{{ getTaxIncludedPrice() }}　円</div>
</template>

<script>
export default {
  methods: {
    getTaxIncludedPrice() {
      return this.price * 1.1
    }
  }
}
</script>

「こんなのはcomputedに定義しましょう」って言うのは簡単なんだけど、
大体なんで？ってなります。

副作用がないコードはcomputedに書きましょうって言っても、
はぁ、、となります。

結論

体重計に乗った時の計測値を取得する() という関数と
かーちゃん殴った時の反応を取得する() という関数を考えましょう。

両者ともに処理が２行で、返り値が１つのシンプルな関数に見えますが、

体重計には何度乗っても反応は変わりません。自分が同じである限りは、結果は一定です。
自分が太れば結果は変わります。
こういう副作用がないものの、計算が必要なものは、体重（）というcomputedにしましょう。

一方で、かーちゃんは一度殴ってしまうと、かーちゃんの状態が変化します。
次に、別の兄弟がかーちゃんを殴ろうとすると、そもそも学習したかーちゃんを殴るのに失敗するでしょう
こういう、副作用がある（状態が変化する）ものはmethodsに定義しましょう。

と、伝えるといいと思います。