一、官方解释
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
简单来说：
watch: 用于监听data里面的数据是否被修改，一旦修改就可以执行一些其他的操作【也是方法】
二、用法
<body>
<div id="app">
<input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: ''
},
watch: {
num(newVal, oldVal) {
// 监听 num 属性的数据变化
// 作用 : 只要 num 的值发生变化,这个方法就会被调用
//只要没有发生变化，就没有办法进行其他的操作
//newData是更新后的数据
//oldData是旧数据
console.log('oldVal:',oldVal)
console.log('newVal:',newVal)
}
}
})
</script>
</body>
三、watch和计算属性的区别
计算属性和监听属性的不同
- 计算属性的get必须有return，而监听属性return可有可无
- computed支持缓存，只有依赖数据发生改变,才会重新进行计算;而watch不支持缓存，数据变,直接会触发相应的操作
- 计算属性可以自定义名称，而监听属性只能监听和data里面的名称相同
- 计算属性适用于复杂的运算，而监听属性适合一些消耗性功能，比如Ajax
- computed不支持异步，当computed内有异步操作时无效，无法监听数据的变化，而watch支持异步
- computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值;而watch监听的函数接收两个参数，第一个参数是最新的值，第二个参数是输入之前的值
- 如果一个属性是由其它属性计算而来的，这个属性依赖其它属性，多对一或者一对一，一般用computed；而当一个属性发生变化时，需要执行对应的操作，一对多，一般用watch
四、watch高级用法
1. immediate（立即处理 进入页面就触发）
比如，当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate属性设置为true，结合handler方法使用。
当设置immediate属性为true时，无论值是否发生改变，时刻都会监听；
当设置immediate属性为false时，常规用法，只有值发生改变才会监听。
2. deep（深度监听）
当使用watch监听的时候，我们可能会发现它可以监听某个数据【单数据，数组】，但是当监听对象的时候，明明数据修改了，却没有监听的提示，这是为什么呢？
这个时候，需要我们开启深度监控，因为在我们没有开启深度监控的时候，watch只会监听第一层，而对象的数据修改了，但对象它的首地址没有修改，所以watch判定它没有发生数据的变化，从而监听不到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>{
{text}}</h1>
<button @click="setHandel">监听</button>
<h1>{
{array}}</h1>
<button @click="setArray">更改数组的值</button>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
text:{
name:'我的一',
age:21
},
array: [1,2,3,4,5]
},
methods:{
setHandel(){
this.text.name = '我是新的一'
},
setArray(){
/**
* 当我们想要更改数组中的值的时候，
* this.array[0] = '我是新一',是没有办法修改的
* 因为vue的数据双向绑定中，调用的是set和get函数，
* 但是在数组里面没有这二个函数
* 所以我们只能使用vue封装的$set和变异方法（也就是push啊。。。）
*/
this.$set(this.array,0,'我是新一')
}
},
watch: {
//watch监听器，只能监听第一次，
//也就是在监听对象的时候，虽然对象中的属性值发生了改变
//但对象的首地址没有改变，所以监听器认为没有改变数据
//当想要监听对象的时候，想要开启深度监听
//deep:true
text: {
handler:function () {
alert('监听到了')
},
deep:true
}
}
})
</script><body>
<div id="app">
<input type="button" value="更改名字" @click="change">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
food: {
id: 1,
name: '冰激凌'
}
},
methods: {
change() {
this.food.name = '棒棒糖'
}
},
watch: {
// 第一种方式：监听整个对象，每个属性值的变化都会执行handler
// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
food: {
// 每个属性值发生变化就会调用这个函数
handler(newVal, oldVal) {
console.log('oldVal:', oldVal)
console.log('newVal:', newVal)
},
// 立即处理 进入页面就触发
immediate: true,
// 深度监听 属性的变化
deep: true
},
// 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
// 函数执行后，获取的 newVal 值和 oldVal 值不一样
'food.name'(newVal, oldVal) {
console.log('oldVal:', oldVal) // 冰激凌
console.log('newVal:', newVal) // 棒棒糖
}
}
})
</script>
</body>
参考：Vue中watch(监听器)的用法详解（通俗易懂，简单明了）_前端报刊的博客-CSDN博客_vue watch用法 vue中watch的详解_半度℃温热的博客-CSDN博客_vue watch