watch

作用：监听数据的变化，拿到变化前与变化后的值。

使用方法：

1. 最简单的用法

// 譬如我要监听stuName的变化情况
watch:{
    stuName(newVal, oldVal){}
}

其中：

newVal就是变化之后的值，oldVal是改变之前的值。

2. 当我们需要监听对象或数组，第一种方法就行不通了，需要深度监听。

// 有这样一个对象
var stu = {
    age: 123,
    name: 'cc'
}
// 只有深度监听才能监听到对象内部的变化
watch:{
    stu:{
        handler(newVal,oldVal){},
        deep:true,
        immediate:true
    }
}

其中：

​ (1)这是以对象的方式来使用watch，其实我们第一种方法就是直接使用的handler。

​ (2)deep为true，表示深度监听。

​ (3)immediate为true，表示当我们监听的数据第一次被绑定的时候就开始监听。场景：当我们的子组件第一次接受到父组件传来的props时，就开始监听该值。

3. 监听对象中的某一个属性。当对象的属性较多时，我们监听整个对象有点耗费资源。可以采用该方法。

// 有这样一个对象
var stu = {
    age: 123,
    name: 'cc'
}
// 监听对象中name属性
watch:{
    'stu.name':{
        handler(newVal,oldVal){},
        deep:true,
        immediate:true
    }
}

其中：

用字符串形式进行监听。

4. 监听路由

watch:{
    '$route.path'(newVal,oldVal){
        -----
    }
}

其中：

通过wach监听路由，我们可以拿到上一个路由，这是一个比较常用的方法。