vue学习笔记-侦听器

1、侦听器用于监听变量值是否发生变化，从而针对数据的变化而做特定的操作。

基本语法：

watch:{
            userName(newVal,oldVal)//方法名必须跟监听的变量名称一致。
        {
            //数据发生变化后执行的代码段，newVal和oldVal分别代表变化
            前的值和变化后的值。
        }
    }

2、默认情况下，组件在初次加载完毕后不会调用watch侦听器。如果想让watch侦听器在页面渲染完成后立即被调用，则需要使用immediate选项，示例代码：

watch:{
    userName:{ //必须是对象的方式，对象名称要与被监视变量名称一致。
        handler:function(newVal,oldVal){//handler为监听到值发生变化
        后的处理函数
            alert("变化了");
        },
        immediate:true//immediate设置为true后，页面初次渲染好之后，就
        立即触发当前的watch侦听器。
    }
}

3、如果watch侦听的是一个对象，对象中的属性值发生了变化，则无法被监听到。此时需要使用deep选项。

data:{
    info:{
        userName:"",
        userPhoto:""
    }
},
watch:{
    info:{ 
        handler:function(newVal,oldVal){
            alert("变化了");
        },
        deep:true//当deeep设置为true时，info对象中的任意属性发生
        变化都会被侦听到。
    }
}

4、如果只需要监听对象中的某个属性值是否发生变化，则可以用如下方式侦听：

data:{
    info:{
        userName:"",
        userPhoto:""
    }
},
watch:{
    'info.userName':{//注意这个地方必须加上单引号
        handler(newVal,oldVal)
        {
            console.log(newVal);
        }
    }
}