vue.js3超初心者向け。watchの意味と簡単なサンプルコードを通しての使い方の解説
98 回閲覧されました
みなさんこんにちは、jonioです。
今回はvue.jsのwatchとは何かと簡単なサンプルコードを通しての解説の記事になります。
Laravelの無料学習サイトを作りました
Laravelを勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
watchとは
値の「変化」を監視して副作用を実行する物です。
副作用の意味がわからないと思うので例えで説明します。
自分が今いる場所で本を読んでいたとします。
この場合は自分がいる周りに何の影響もありません。
でも壁に落書きをしたら壁に落書きという影響を及ぼします。
自分の外に影響を及ぼすのを副作用と言います。
プログラムだとAPI通信の処理をするとか関数の外に処理を行うことになります。
簡単なサンプルコードで説明します。
簡単なサンプルコード
下記のコードを考えます。
<template>
<div>
<input v-model="keyword" placeholder="検索ワード" />
</div>
</template>
<script setup>
import { ref, watch } from 'vue'
const keyword = ref('')
watch(keyword, (newVal, oldVal) => {
console.log(`検索ワードが "${oldVal}" から "${newVal}" に変わりました`)
})
</script>watchを使う時はまず8行目に記述します。
そして12行目で関数の記述をします、最初のwatchは固定です。
第一引数は監視する値で今回はkeywordです。
この（監視している）値が変化するたびに関数が動作します。
この場合の関数の動作はconsole.logで表示するのを指しています。
newValは3行目のフォームに入れる新しい値でoldValは最初に入っていた値です。
イメージが沸かないと思うので具体例で説明します。
フォームの値の初期値は10行目より空っぽです。
だから「oldVal = 空」です。
フォームに「a」と入力したとします。
この時「newVal = a」です。
次にフォームに「aa」と入力したとします。
この時「oldVale = a」で「newValue = aa」となります。
そしてフォームに値を入力するたびに監視しているkeywordが変更するのでwatchが動作してconsole.logで表示されます。
監視を開始した瞬間にwatchを動作させる方法
watchは対象が変化するたびに関数を動作させますが監視を開始した瞬間(雑な言い方をするとページを表示した瞬間)に動作させる方法があります。
先程のコードに追記します。
<template>
<div>
<input v-model="keyword" placeholder="検索ワード" />
</div>
</template>
<script setup>
import { ref, watch } from 'vue'
const keyword = ref('')
watch(keyword, (newVal, oldVal) => {
console.log(`検索ワードが "${oldVal}" から "${newVal}" に変わりました`)
},
{ immediate: true } //この行を追記
)
</script>15行目を追記すればいいです。
これでページを表示した瞬間に13行目が動作します。
これだけ見ると使い所のイメージが湧かないと思いますが親コンポーネントから子コンポーネントに遷移した時に親コンポーネントから渡された変数を子コンポーネントで表示する時に便利です。
言葉で言うのは簡単ですがイメージが沸かないと思うのでコードで説明します。
親コンポーネントのコードは下記です。
<template>
<div>
<button @click="openModal">モーダルを開く</button>
<ChildModal v-if="showModal" :message="parentMessage" />
</div>
</template>
<script setup>
import { ref } from 'vue'
import ChildModal from './ChildModal.vue'
const showModal = ref(false)
const parentMessage = ref('こんにちは！親からのメッセージです')
const openModal = () => {
showModal.value = true
}
</script>13行目の「parentMessage」を子コンポーネントに渡します。
コードを下記にします。
<template>
<div class="modal">
<p>受け取ったメッセージ: {{ parentMessage }}</p>
</div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { defineProps } from 'vue'
const props = defineProps({
message: String
})
const parentMessage = ref('')
watch(
() => props.message,
(newVal) => {
parentMessage.value = newVal
console.log('初期メッセージを受け取りました:', newVal)
},
{ immediate: true }
)
</script>23行目の記述があることで親コンポーネントから子コンポーネントに遷移した際に「こんにちは！親からのメッセージです」が表示されます。
19行目の「newValue」の最初の値は子コンポーネントを表示した瞬間の値の「こんにちは！親からのメッセージです」になります。
watchはいつ使うか
副作用（外に処理）をする時に使うので処理をしたい時に使います。
もっと言うとメソッドの処理を使ってページの一部分の表示を変えるとかです。
似ているけど違うことをするのが「computed」です。
記事を書いていますのでよかったら読んで下さい。
