vue中事件监听watch

vue中watch实际上是用来监听vue实例中的数据变化

监听String

<template>
    <div @click="stringClick">{{msg}}</div>
</template>

<script>
export default {
    name: "jianting",
    data() {
        return {
            msg: "1223"
        };
    },
    watch: {
        msg: function(newVal, oldVal) {
            // TO DO
            console.log("newVal:", newVal);
            console.log("oldVal:", oldVal);
        }
    },
    methods: {
        stringClick() {
            this.msg = Math.random() * 100;
        }
    }
};
</script>

监听对象

 <template>
    <div @click="click">
        <div>姓名：{{obj.name}}，年龄：{{obj.age}}，他的儿女有：</div>
        <div v-for="(item, index) in obj.children" :key="index">姓名：{{item.name}}，年龄：{{item.age}}</div>
    </div>
</template>

<script>
export default {
    name: "jianting",
    data() {
        return {
            obj: {
                name: "Tony",
                age: 50,
                children: [
                    {
                        name: "小明",
                        age: 12
                    },
                    {
                        name: "小花",
                        age: 5
                    }
                ]
            }
        };
    },
    watch: {
        obj: {
            handler: function(newVal, oldVal) {
                // TO DO
                console.log("newVal:", newVal);
                console.log("oldVal:", oldVal);
            },
            deep: true,
            immediate: true
        },
        "obj.name": function(newVal, oldVal) {
            // TO DO
            console.log("newVal obj.name:", newVal);
            console.log("oldVal obj.name:", oldVal);
        }
    },
    methods: {
        click() {
            this.obj.name = "未知";
        }
    }
};
</script>

watch监听对象的时候，需要加deep:true，只有这样才能深入底层去实时监听，没有加的话，对象是监听不到变化的,添加immediate时会在侦听开始之后被立即调用

监听路由

  watch: {
        $route: {
            handler: function(val, oldVal) {
                console.log(val);
            },
            // 深度观察监听
            deep: true,
            immediate: true
        }
    }