简单应用

data() {
    return {
        cityName: 'shanghai'
    }
},
watch: {
    cityName(newName, oldName) {
        // ...
    }
}

直接写一个监听处理函数，当每次监听到 cityName 值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名：

watch: {
    cityName: 'nameChange'
}

deep

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

data() {
    return {
        cityName: {
            id: 1, 
            name: 'shanghai'
        }
    }
},
watch: {
    cityName: {
        handler(newName, oldName) {
            // ...
        },
        deep: true
    }
}

设置deep: true则可以监听到cityName.name的变化，此时会给cityName的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对watch: {
'cityName.name': {
handler(newName, oldName) {
// ...
},
deep: true
}
}象属性：

data() {
    return {
        cityName: {
            id: 1, 
            name: 'shanghai'
        }
    }
},
watch: {
    'cityName.name': {
        handler(newName, oldName) {
            // ...
        },
        deep: true
    }
}

这样只会给对象的某个特定的属性加监听器。

数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。

immediate

进入组件的时候，当值第一次绑定的时候并不会执行watch，是因为immediate 默认 false。
当 immediate = true 的时候，最初绑定值的时候也执行函数。并且可以监测到组件传递数据。

注意点

在watch中不要使用箭头函数，因为箭头函数中的this是指向当前作用域。