Vue中的watch监听

watch是用来监听数据，路由，数组，对象等的变化，数据发生改变就会触发watch中定义的方法

例如以下代码：

<div>
<p>FullName: {{fullName}}</p>
<p>FirstName: <input type="text" v-model="firstName"></p>
</div>
new Vue({
    el: '#root',
    data: {
        firstName: 'Dawei',
        lastName: 'Lou',
        fullName: ''
    },
    watch: {
        firstName(newName, oldName) {
            this.fullName = newName + ' ' + this.lastName;
        }
    }
})

其中watch中的firstName函数就是你要监控data中定义的firstName这个数据是否发生变化，firstName函数有两个参数，携带的是新值，以及发生变化之前的数据，可以让我们对数据进行更好的操作，这只是watch的简单实用方法，下面来看看还有其他的什么实用方法

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

watch:{

    firstName:'someMethod'
},

methods:{
    someMethod:function (val,oldval){
	console.log(val+'-----'+oldval)
    }
},

watch还包含了handler和immediate以及deep三个 属性

首先watch的一个特点，在最初绑定watch的时候是不会触发watch，需要等到数据发声改变才会触发，如果我们需要在最绑定的时候就执行，那么改如何写那？首先我们需要改变下watch的写法，请看以下代码

watch: {
    firstName: {
        handler(newName, oldName) {
        this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true
}

handler之前我们写的 watch 方法其实默认写的就是这个handler，Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。

immediate是否在数据初次绑定的时候就执行watch

deep是否深度监听，例如对象中的值是否发生了改变