本文共 1647 字，大约阅读时间需要 5 分钟。

什么是watch？

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

类型：{ [key: string]: string | Function | Object | Array }

测试公共代码如下：

第一种方式： 

watch: {    // 第一种watch监听方式    watchTextOne (newVal, oldVal) {        console.log('watchTextOne新值：', newVal)        console.log('watchTextOne旧值：', oldVal)    },},

第二种方式：

watch: {    // 第二种watch监听方式，写一个监听处理函数    watchTextTwo: 'watchTextTwoFn',}|methods: {    watchTextTwoFn (newVal, oldVal) {        console.log('watchTextTwo新值：', newVal)        console.log('watchTextTwo旧值：', oldVal)    },},

以上两种方式使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。

第三种方式：

watchTextThree: {    handler (newVal, oldVal) {        console.log('watchTextThree新值：', newVal)        console.log('watchTextThree旧值：', oldVal)    },    immediate: true // immediate表示在watch中首次绑定的时候，是否执行handler},

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

watchTextFour: {    handler (newVal, oldVal) {        console.log('watchTextFour新值：', newVal)        console.log('watchTextFour旧值：', oldVal)    },    deep: true // 此时会给watchTextFour的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。},

如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性： 

'watchTextFour.age': {    handler (newVal, oldVal) {        console.log('watchTextFour.age新值：', newVal)        console.log('watchTextFour.age旧值：', oldVal)    },    deep: true},