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);

                }

            }

        })