#Vue props と computed の違いと method の作用が分かる簡単なコードの例

NOTE

• computed は計算機能付き props である

算出プロパティ ※計算機能付きのプロパティ
データそのものに何らかの処理を与えたものをプロパティにしたい(インスタンスに持たせて参照できるようにしたい)ときに用いる

Code

props の値を二倍するだけの computed の例
count を二倍した countDouble を作っている

<template>
  <div>
    <h2>
      count: {{ count }}
    </h2>
    <h2>
      countDouble: {{ countDouble }}
    </h2>
    <input type="button" @click="incrementCounter" value="Increment!">
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 1
    }
  },
  computed: {
    countDouble () {
      return this.count * 2
    }
  },
  methods: {
    incrementCounter (e) {
      this.count = this.count + 1
    }
  }
}
</script>

// https://dev83.com/vue-computed-methods/

View

count の値を増やすと doubleCount も増える

computed vs method

method でも同じことが実現できるけど
computed にはキャッシュの利点があるようです

Original by Github issue

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter