vue侦听器（简单讲讲侦听器）

什么是侦听器？

侦听器 watch 和methods 是vue组件配置选项中的一个
侦听器本质上也是一个函数 他主要用来监听数据的变化

基本语法如下:

//[侦听器]
    //作用:用来侦听数据有没有变化,一旦有变化就调用函数。
    //语法:在和data、 methods这些平级的位置写个watch
    new Vue({
        el:'',
        data:{

        },
        methods:{

        },
        watch:{
            //参数一改变前的值
            //参数二改变后的值
            要侦听的数据(newvalue,oldvalue){
                
            }
        }
    })

这里要侦听的数据中的参数一个代表的是改变后的数据，一个是改变前的数据

使用方法：

使用方法有两种格式

方法（函数）形式的侦听器

    

        

            

               {{item}}
            
            宫崎骏的电影
            删除最后一部电影

        
    

     

上面是以方法形式定义的有以下两个缺点：
缺点1：无法在刚进入页面的时候自动触发；
缺点2：如果侦听的是一个对象，如果对象里边的属性发生了变化，不会触发侦听器（不能够深度侦听）

以对象的形式

    

        
{{obj.name}}---{{obj.age}}---{{obj.say}}
        修改名字
        修改年龄
        修改语言
        修改obj的指向

    

 1.deep（深度侦听）：默认情况下，侦听器无法侦听对象的属性值的变化，需要添加deep配置为true，才能侦听到对象的属性值的变化

2. handler（固定方法触发）：因为你要添加deep的配置，所以，侦听器的形式要变更为对象形式，只有对象才能添加其它的配置, 同时侦听函数必须为handler

3. immediate（立即侦听）：如果需要默认一进页面就触发一次，添加immediate配置选项为true
————————————————

用对象的方法形式就没有了deep和immediate就不存在用函数方法形式的缺点

此外侦听器的主要应用场景是验证用户名是否可用

设想：输入框中输入信息，失去焦点时验证是否存在，如果已经存在，提示重新输入，如果不存在，提示可以使用,这样就可以避免注册信息的重复

总的来说Vue侦听器是提供给开发者可以用来监测某些数据的变化，从而针对这些数据的变化进行某些操作。但是要注意：侦听器本质上是一个函数，如果要监听哪一个数据的变化，就把那个数据作为函数名