vue中的watch监听器

方法一：

当监听某一属性的变化时，建议直接使用函数写法

const vm = new Vue({
　　el:'#app',
　　data:{
　　　　username:''
　　},
　　watch:{
　　　　username(newVal,oldVal){
　　　　　　console.log(newVal,oldVal)
　　　　　　}
　　}

})

方法二：

当页面初始化需要监听一次或者监听对象是对象时，使用对象写法

const vm = new Vue({
　　el:'#app',
　　data:{
　　　　info:{
　　　　　　username:''
　　　　}
　　},
　　watch:{
　　　　username:{
　　　　　　handler(newVal,oldVal){
　　　　　　　　console.log(newVal,oldVal)
　　　　　　},
　　　　immediate:true,//表示页面初次渲染好之后，就立即触发当前的watch监听器，默认false,
　　　　deep:true, //深度监听对象中每一个字段变化
　　　　}
　　}
})

　　若只想监听对象中某个字段的变化，可以直接取对应的字段进行监听，如下：

watch:{
　　　　'info.username':{
　　　　　　handler(newVal,oldVal){
　　　　　　　　console.log(newVal,oldVal)
　　　　　　}
　　　　}
　　}