Vue.jsでcomputedではなくwatchを使わないといけない場合
1087 回閲覧されました
Vue.jsでスネークゲームを作っている時にwatchを使うのかcomputedを使うのかで詰まって悩んだので備忘のための記事を書きました。
ネットで情報はいっぱいあるけど書き方ばかりで使い方の例があまりなくやっとの思い出解決できました。
今回はヘビが餌を食べた時に餌を他の場所に表示させるのにwatchを使います。
computedでは餌を他の場所に表示できない
↓のコードではヘビが餌を取っても餌の場所は変わりません。
ヘビが餌を取った時に「console.log(food)」を使ってデベロッパーツールで餌の場所が変わったのを確認できますが餌の場所が変わってないのが分かります。
computedですが表示されていて（今回の場合はヘビ）それに変更が加わった時に動きます。
でも餌を取った時は ヘビには何も変更はないのでcomputedは動かないです。
こんな場合はwatchを使えばいいです。
watchを使うと餌を他の場所に表示できる
コードを↓にします。
デベロッパーツールのを見るとヘビが餌を取るたびに餌の場所が表示されるのが分かります。
ネットを調べて情報が全くなかったのですがwatchは ある物が条件を満たした時にも使えるみたいです。（今回の条件はヘビが餌と同じ場所になった時）
他の例でも確かめました。
コードを↓にしてください。
これはヘビが0から99のマス目の中で10のマス目に乗った時にデベロッパーツールに表示されるコードですがヘビが10のマス目に乗った時にデベロッパーツールに表示されているのが分かります。