vue.js3超初心者向け。computedの意味と簡単なサンプルコードを通しての使い方の解説
8 回閲覧されました
みなさんこんにちは、jonioです。
今回はcomputedの意味と簡単なコードを通して使い方の解説をします。
Laravelの無料学習サイトを作りました
Laravelを勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
computedとは
computedが依存している値が変更されたときだけ再計算され、表示も自動で更新されます。
「依存している」というのは「computedに使われている変数」という意味です。
「再計算」はcomputedの中で定義された関数が再び実行されるという意味です。
意味は分かってもピンとこないと思うので簡単なサンプルコードで解説をします。
簡単なサンプルコード
下記のコードで考えます。
<template>
<div>
<input v-model="firstName" placeholder="姓" />
<input v-model="lastName" placeholder="名" />
<p>フルネーム（敬称付き）: {{ fullNameWithTitle }}</p>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const firstName = ref('山田')
const lastName = ref('太郎')
const fullNameWithTitle = computed(() => {
const name = `${firstName.value} ${lastName.value}`
return name;
})
</script>このコードでcomputedが依存している（使われている）のは17行目からfirstNameとlastNameと言えます。
だからfirstNameやlastNameの値を変えると16行目のfullNameWithTitle関数が動作して6行目のfillNameWithTitleの値が変更（再計算）されます。
説明していませんでしたがcomputedは必ず値を返します。
19行目です。
値を返すから6行目で使われています。
なぜ使うか
computedを使うことで依存している値が変わらない限りその部分の再表示はないのでページ全体の読み込みをしなくて済みます。
だから読み込みのパフォーマンスを上げることができるからです。
似ていることをするのがwatchです。
記事を書いていますのでよかったら読んで下さい。
