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
        }
    }
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值