1、下面代码是watch的一种简单的用法

　　<div id="app">
　　    <input type="text" v-model="firstName" />
　　</div>
　　 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
　　 <script>
　　var vm=new Vue({
　　    el:"#app",
　　    data:{
　　        firstName:"张"
　　    },
　　    watch:{         
　　        firstName：(newVal,oldVal){
　　//firstName即为你想监听的数据的名称，要监听谁函数名就用谁的 如监听v-model的firstName                    
　　//newVal：表示改变后的值，即第一个形参，不要调换位置
　　//oldVal：表示改变前的值，
　　            console.log({newVal,oldVal});   //  {newVal: "陈", oldVal: "张"}
　　        }
　　        //直接写一个监听处理函数，当每次监听到cityName值发生改变时，执行函数。
　　        //也可以在所监听的数据后面直接加字符串形式的方法名：firstName: 'nameChange'
　　    },
　　    methods:{
　　        nameChange(){
　　         }
　　    }
　　})
　　 vm.firstName = "陈"；//改变监听的值
</script>

2、immediate 立即监听

　　使用watch基本用法时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

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

　　监听的数据后面写成对象形式，包含handler方法和immediate，上面简单的写法我们写的函数其实就是在写这个handler方法、默认省略而已。

3、handler方法

　　<div id="app">
　　    <div>
　　        <p>Number: {{ myNumber }}</p>
　　        <p>Number: <input type="text" v-model.number="myNumber"></p>
　　    </div>
　　</div>
　　<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
　　<script>
　　new Vue({
　　    el: '#app',
　　    data: {
　　        myNumber: 'Dawei'
　　    },
　　    watch: {
　　        myNumber: {
　　            handler(newVal, oldVal) {
　　                console.log('newVal', newVal);
　　                console.log('oldVal', oldVal);
　　            },
　　            //immediate为true时则立即触发回调函数；如果为false，则和上面的例子一样，不会立即执行回调。
　　            immediate: true
　　          }
　　      }
　　 })
　　</script>
　　//handler方法就是你watch中需要具体执行的方法

4、 deep属性

　　对于对象或者对象中的属性，我们如何监听？那么就介绍deep属性。它的作用就是解决这个问题的关键。

　　<div id="root">
　　    <p>obj.a: {{obj.a}}</p>
　　    <p>obj.a: <input type="text" v-model="obj.a"></p>
　　</div> 
　　 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
　　 <script>
　　    new Vue({
　　        el: '#root',
　　        data: {
　　            obj: {
　　                 a: 123
　　            }
　　        },
　　        watch: {
　　            obj: {
　　            handler(newName, oldName) {
　　                console.log(newName, oldName);
　　            },
　　            immediate: true,
　　            deep:true
　　            }
　　        } 
　　})
	</script>

　　上面的代码如果不加deep:true 那么console中就不会执行，只执行第一次，输出结果为undefined
　　默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到。
　　 这个时候就可以使用deep深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样消耗过大。
总结
侦听器一般来说是用来监听数据的变化，默认是在数据发生变化时执行。
监听的数据名放到这里面作为函数名，这个函数里面有两个参数，一个是新值，一个是旧值。
在vue中，使用watch来响应数据的变化，关于watch的用法大致有三种。

作者：黄俊宇