Vue3 deep watcher(ディープウォッチャー)に詰まったので備忘録
はじめに
こんにちは！
業務上でvueのwatchを利用して監視させようと思ったら、なぜか監視してくれなかったのでその備忘録になります。
個人的にはドキュメントがわかりにくく、解決するのに苦労しました。
同様に悩まれている方の少しでも助けになれたらと思います。
ではいきましょう。
ウォッチャとは
まずはwatchオプションについてです。
公式から抜粋したものが下記になります。
ほとんどの場合、算出プロパティの方が適切ですが、カスタムウォッチャが必要な場合もあります。そのため Vue は、データの変更に反応するためのより汎用的な方法を、watch オプションによって提供しています。これはデータを変更するのに応じて非同期処理や重い処理を実行したい場合に最も便利です。
要は、watchで監視対象のデータを指定してあげて、
そのデータに何かしらの変更が加えられたときに予め用意されていた関数を実行するオプションになります。
個人的に、超便利なんで算出プロパティより多用してしまっています・・・
参考の書き方は以下になります。
<script>
const watchExampleVM = Vue.createApp({
data() {
return {
question: '',
answer: 'Questions usually contain a question mark. ;-)'
}
},
watch: {
// question が変わるたびに、この関数が実行される
question(newQuestion, oldQuestion) {
if (newQuestion.indexOf('?') > -1) {
this.getAnswer()
}
}
},
methods: {
getAnswer() {
this.answer = 'Thinking...'
axios
.get('https://yesno.wtf/api')
.then(response => {
this.answer = response.data.answer
})
.catch(error => {
this.answer = 'Error! Could not reach the API. ' + error
})
}
}
}).mount('#watch-example')
</script>
watchで指定している questionに変更が加えられるたびにwatchで登録している関数が実行される仕組みになっています。
deep watcherについて
上記の説明でwatchの使い方はなんとなくわかったと思います。
ただ、watchで監視対象がオブジェクトの場合、特殊な宣言を入れなければならない点に注意してください。
それが、deep（それとhandler）を追加することです。
dataをオブジェクトに変更した場合の処理を記述します。
<script>
const watchExampleVM = Vue.createApp({
data() {
return {
books: [
{ id: 1, title: '坊っちゃん' },
{ id: 2, title: '人間失格' },
{ id: 3, title: 'ノルウェイの森' }
],
}
},
watch: {
books: {
handler: function () //handlerプロパティ内に処理を記述
console.log("変更")
},
deep: true //deepをtrueへ変更
}
},
}).mount('#watch-example')
上記のように、handler内に監視対象が変更された際実行したい処理を記述し、
deepをtrueに変更すればオブジェクトでも監視対象となります。
最後に
これでまた一歩前進しましたね！
Author And Source
この問題について(Vue3 deep watcher(ディープウォッチャー)に詰まったので備忘録), 我々は、より多くの情報をここで見つけました https://qiita.com/hiroyuki_0507/items/9f4f363c0920ac48ec7f著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .