読んで欲しい人
- Vue.jsを使用していて
computed()の使い方がわからない人 - 過去の自分
computedとは
ざっくり言うと、コンポーネント内のデータが変更された時に、自動で計算をしてくれる便利なメソッドです。
使い方
//引数の中に関数入れて使う
computed(() => {})
//関数内では計算処理を記述する
const totalAmount = computed(() => {
return price.value * 5
})
//templateでは下記な感じで表示できちゃう
//<p>{{ totalAmount }}</p>
いつ使うのか、何が嬉しいのか
例えば下記のプログラム
- scoreが75点以上であればA評価、それ以下であればB評価を出すと言うプログラム
<script>
const score = ref(0)
const results = computed(() => {
return score.value > 75 ? 'A' : 'B'
})
</script>
<template>
<p>{{ results }}<p>
</template>
//結果→B
嬉しいこと
-
scoreの値が変わるたびに、computed()は関数を実行してくれる
-
computed()は常に、自分の中で使用されているリアクティブな値(今回ならscore)を監視し続けてくれる。
-
ので、
下記のようなボタンを押した場合、computedは再実行されて結果がAになる
<script>
const score = ref(0)
const results = computed(() => {
return score.value > 75 ? 'A' : 'B'
})
</script>
<template>
<p>{{ results }}<p>
<button @click="score + 80"><button>
</template>
//ボタンを押すと結果→A
仕組み
- templateと同じ技術を利用している
vue.jsではリアクティブエフェクトという機能を利用して、リアクティブなメソッドを監視している。
- 内部のリアクティブな値が変更されると
computed()であれば関数の中身を再度実行する - templateであれば、表示をサイレンダリングしている
上記2つは同じ処理を用いて実装されている。
注意
- 監視されてない時は動かない
<script>
const score = ref(0)
const results = computed(() => {
return score.value > 75 ? 'A' : 'B'
})
</script>
<template>
<button @click="score + 80"><button>
</template>
誰もresultsを監視していない場合は、score.valueの値が変更されてもcomputed()内部の関数は実行されません
感想、学び
-
computed()よくわからなくて難しかった -
computed()を深ぼって調べるとVue.jsがどんな技術を用いているのか？がわかるので結構良かった。 - 応用がたくさん効きそう