🖥
#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オープンチャットもご利用ください。
公開日時
2020-05-05
Discussion