• 特定のデータまたは、算出プロパティの状態を監視して、変化があったときに登録した処理を自動的に実行できるもの
• 非同期な処理を行いたい時に使用することが多い
• thisは使用できない

事例

検索フォームの値が変わったタイミングで自動的にAjaxを行なって結果を一覧表示

<div id="app">
    <p>{{ message }}</p>
    <p>
        <input type="text" v-model="message">
    </p>
</div>

const app = Vue.createApp({
    data: () => ({
        message: 'Hello VueJs'
    }),
    watch: {
        message: function (newValue, oldValue) {
            console.log('new: %s, old:%s', newValue, oldValue)
        }
    }
	  🔼messageを監視して、データに変更があれば関数が実行される
})
app.mount('#app')

算出プロパティ or 監視プロパティ

• どちらでも実装できる場合、基本的には算出プロパティの利用を推奨
• シンプルに記述できるため

<div id="app">
    <p><input type="text" v-model="firstName">firstname</p>
    <p><input type="text" v-model="lastName">lastname</p>
    <p>fullName: {{ fullName }}</p>
</div>

🔽監視プロパティで記述
const app = Vue.createApp({
    data: () => ({
        firstName: '',
        lastName: '',
        fullName: ''
    }),
    watch: {
        firstName: function (value) {
            this.fullName = value + ' ' + this.lastName
        },
        lastName: function (value) {
            this.fullName = this.firstName + ' ' + value
        }
    }
})

🔽算出プロパティで記述
const app = Vue.createApp({
    data: () => ({
        firstName: '',
        lastName: '',
    }),
    computed: {
        fullName: function (value) {
            return this.firstName + ' ' + this.lastName
        },
    }
})
app.mount('#app')

🔼比較すると、算出プロパティの方がすっきりかけている

deepオプション

• ネストされたオブジェクトも監視する
• データの変更された箇所が深い場合は、watchプロパティで検知できない可能性がある

const app = Vue.createApp({
    data: () => ({
        colors: [
            { name: 'Red'},
            { name: 'Green'},
            { name: 'Blue'}
        ]
    }),
    watch: {
        colors: {
            handler: function (newValue, oldValue) {
                console.log('updated')
            },
        }
    },
		🔼下記のmethodsでデータが変更されても、変更されるデータが深いため、上記のwatchで検出ができない
    methods: {
        onClick: function () {
            this.colors[1].name = 'White'

        }
    }
})
app.mount('#app')