watch: {
    firstName (newName, oldName) {
        this.fullName = newName + this.lastName
    }
}

立即執行一次之後，檢測到資料變化再執行

watch: {
    firstName: {
        handler (newName, oldName) {
            this.fullName = newName + this.lastName
        },
        immediate: true
    }
}
 

handler只監聽物件屬性引用的變化，也就是說只有改變賦值的時候才能夠監聽到。如果物件裡面的值發生變化，需要新增deep: true

data: {
    obj: {
        a: 0
    }
},
watch: {
    obj: {
        handler () {
            console.log('obj.a changed')
        },
        deep: true
    }
}

但是效能消耗大，可以在字串中寫物件深入的屬性呼叫，他會層層解析，最終解析到最後一個點後面的屬性，然後再去監聽真正想去監聽的屬性。

data: {
    obj: {
        a: 0
    }
},
watch: {
    'obj.a': {
        handler () {
            console.log('obj.a changed')
        }
    }
}