vue中的监听

监听string

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>

监听对象中的属性

 
data() {
        return {
            obj: {
                name: "Tony",
                age: 50,
                children: [
                    {
                        name: "小明",
                        age: 12
                    },
                    {
                        name: "小花",
                        age: 5
                    }
                ]
            }
        };
    },
....
watch: {
        obj: {
            handler: function(newVal, oldVal) {
                // TO DO
            },
            deep: true,
            immediate: true
        },
        "obj.name": function(newVal, oldVal) {
            // TO DO
           
        }
    },
.....

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

监听路由

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