Vue勉強 watch のdeepオプション

(Vue.js 3.1.5を使用)

監視プロパティwatch の deepオプションについて。

deepオプションをtrueにしないと、
監視対象のデータのネストが深い場合には監視されない。
(オプション書かない場合、デフォルトがfalse）

javascript

const app = Vue.createApp({
    data: () => ({
        prefs: [
            {name: '青森'},
            {name: '秋田'},
            {name: '岩手'},
            {name: '山形'},
        ]
    }),
    watch: {
        prefs: {
            handler: function(newValue, oldValue){
                console.log('Update!')
            },
            deep: false //prefs.nameはネストが深いため、ここをtrueにしないと、watchのhandlerで検知できない。
        },
    },
    methods: {
        onClick: function(event){
            this.prefs[0].name = '熊本' 
            this.prefs[2].name = '大分' 
        }
    },
})

app.mount('#app')

html

    <div id="app">
      <ul>
        <li v-for="pref in prefs">
          {{ pref.name }}
        </li>
      </ul>
      <button v-on:click="onClick">Click!</button>
    </div>

watch のdeepオプションfalseの場合

上記コードのこの行のdeepオプションをfalseにする。(deepオプション書かない場合も、デフォルトでfalseになる。)

javascript

            deep: false //prefs.nameはネストが深いため、ここをtrueにしないと、watchのhandlerで検知できない。

ボタン押す前

ボタンをクリックすると、
メソッドでのonClickで、（青森、岩手）が、（熊本、大分）に変わるが、
watchが反応せず、コンソールには何も表示されない。

ボタン押したあと

watch のdeepオプションをtrueにする場合

上記コードのこの行のdeepオプションをtrueにする。

javascript

            deep: true //prefs.nameはネストが深いため、ここをtrueにしないと、watchのhandlerで検知できない。

ボタン押す前

ボタンをクリックすると、
watchが機能して、コンソールにUpdate!と表示される。

ボタン押したあと