3. Vue侦听器

目录

一、什么是侦听器?

二、Vue侦听器的基本语法?

1. 方法格式的侦听器

2. 对象格式的侦听器

三、Vue侦听器的深度监听


一、什么是侦听器?

Vue侦听器是提供给开发者可以用来监测某些数据的变化,从而针对这些数据的变化进行某些操作。

但是要注意:侦听器本质上是一个函数,如果要监听哪一个数据的变化,就把那个数据作为函数名


二、Vue侦听器的基本语法?

Vue侦听器提供了两种语法格式。一种是方法格式的写法,另一种是对象格式的写法。下面我们分别来看:

1. 方法格式的侦听器

 var vm = new Vue({

            el: "#app",

            data: {

                username: ''

            },

            // 所有的侦听器,都定义在watch节点下

            // 侦听器本质上是一个函数,要监视哪一个数据,就把哪一个数据作为函数名

            watch: {

                username(newval, oldval) {

                   // newval表示:变化后的新值;oldval表示:变化前的旧值

                    console.log(newval, oldval);

                }

            }

        })

方法格式的监听器有两个缺点

1)首次进入浏览器的时候,无法立即触发一次侦听器

2)如果侦听的是一个对象,对象里面的数据发生了变化,并不会出发侦听器

2. 对象格式的侦听器

 watch: {

                // 优点:可以通过 immediate 控制侦听器自动触发一次

                username: {

                    handler(newval, oldval) {

                        console.log(newval, oldval);

                    },

                    // 可以控制侦听器自动触发一次 ,默认为false

                    immediate: true

                }

对象格式的侦听器有两个优点

1)可以通过immediate属性,控制侦听器自动触发一次(默认是false)

2)可以 通过deep属性,控制侦听器深度监听到对象中每一个属性的变化


三、Vue侦听器的深度监听

var vm = new Vue({

            el: "#app",

            data: {

                info: {

                    username: 'liupeng'

                }

            },

            // 所有的侦听器,都定义在watch节点下

            // 侦听器本质上是一个函数,要监视哪一个数据,就把哪一个数据作为函数名

            watch: {

                // info: {

                //     handler(newval) {

                //         console.log(newval);

                //     },

                //     // 开启深度监听,只要对象中任何一个属性变化了,都会触发对象的侦听器

                //     deep: true

                // }

                // 如果想要侦听对象里某一个子属性的变化,可以通过''单引号进行包裹

                'info.username' (newval) {

                    console.log(newval);

                }

            }

        })

  • 15
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue侦听器(Watcher)是一种功能强大的特性,用于监听数据的变化并执行相应的操作。它可以在数据变化时执行一些逻辑,包括更新视图、发送请求或触发其他操作。下面是一些Vue侦听器的常见应用场景: 1. 数据变化时更新视图:当数据发生变化时,你可以使用侦听器来更新相关的视图。例如,你可以监听一个计算属性的变化,在其依赖的数据发生改变时,自动更新视图。 2. 异步操作:有时候你可能需要在数据变化后执行一些异步操作,例如发送AJAX请求或者触发一些副作用。你可以使用侦听器来监听数据的变化,并在回调函数中执行异步操作。 3. 表单验证:在表单中,你可以使用侦听器来监听用户输入的值,然后进行一些验证逻辑。当输入值发生改变时,侦听器可以检查输入是否符合要求,并做出相应的反馈。 4. 联动操作:有时候多个数据之间会存在联动关系,一个数据的变化会影响到其他数据。你可以使用侦听器来监听一个数据的变化,并在回调函数中修改其他相关的数据。 5. 触发事件:当特定的数据满足某个条件时,你可以使用侦听器来触发自定义事件,以便其他组件或模块能够接收到相应的通知。 这些只是一些常见的应用场景,实际上你可以根据具体需求和业务逻辑,灵活运用Vue侦听器来实现更多的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr_LiuP

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值