Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

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

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

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

結論

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

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

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

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

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

jun6428_bridge
Webエンジニア python/django vue.js(nuxt.js) angular ちょっとわかります。 ブリッジコンサルティンググループ株式会社 CTO
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away