vue配置项---watch的使用

watch有四种常用用法

情况一：基础监听，比如监听data中定义的某个数据。

    data() {
        return {
            msg: "hello",
        };
    },
    watch: {
        msg(newmsg, oldmsg) {
            console.log(newmsg);
        },
    },

直接写一个监听处理函数，默认参数第一个是新值，第二个是旧值。每次监听到msg变化都会执行这个函数。

情况二：使用handle方法immediate与deep属性。

    data() {
        return {
            msg: {
                name: "liu",
                age: "18",
            },
        };
    },
    watch: {
        msg: {
            handler(newmsg, oldmsg) {
                console.log(newmsg);
            },
            immediate: true,
            deep: true,
        },
    }

    一般情况下，在数据第一次绑定时不会执行监听函数，只有当值变化时才会执行监听函数。此时将immediate设置为true可以实现首次监听。

    当监听对象的改变时普通的watch方法无法监听对象内部属性的变化，需要设置deep属性，开启深度监听deep为true时则改对象中的所有属性都会被监听，对象中每个属性改变都会执行handler函数。如果只想监听对象中某个属性的变化可以用如下写法...（情况三）

情况三：只监听对象中的某个属性

    data() {
        return {
            msg: {
                name: "liu",
                age: "18",
            },
        };
    },
    watch: {
        "msg.name": {   //键路径必须加上引号
            handler(newmsg, oldmsg) {
                console.log(newmsg);
            },
            immediate: true,
            deep: true,
        },
    },

也可以使用函数的形式

 情况四：监听路由变化

    watch: {
        $route(to, from) {
            var toName = to.name;
            var toIndex = to.meta.index;
            var fromIndex = from.meta.index;
            this.transitionName = toIndex < fromIndex ? "slide-right" : "slide-left";
        },
    },

监听路由$route有两个默认参数，to、form

to：存放跳转后改变的数据

form：跳转前的数据

举个例子：

这里我携带了query参数分别是 categoryName="图书、音像、电子书刊" category1Id=1

 那么我开始跳转到如果我携带的query参数发生改变是否能触发watch的监视呢

 让我们证明一下

我的query参数已经修改了，那么控制台一定会输出to和from

我们由控制台可以看出

to里面的这个query是我们跳转过后的query参数

而from里面的query是上一个的query参数