vue watch详解

watch的详细用法：

watch:常规用法1

<input type="text" v-model="uerName"/>

data(){
	return {
		userName:'qdleader'
	}
},
watch:{
	userName(newName, oldName) {
		//...
	}
}

也可以写一个监听处理函数， 当每次监听到 cityName 值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名：

watch: {
    userName: 'nameChange'
    }
 } 

这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

因此当我门在子组件props首次获取父组件传过来的默认值时候，需要立即执行一次函数，这就引出第二种immediate

2.immediate和handler

data(){
	return {
		userName:'qdleader'
	}
},
watch: {
	userName:{
		handler(newName, oldName) {
			//..
		},
		immediate:true,//immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
	}
}

3.deep

还有很多时候，我们是要监听对象某一属性变化的，这时候就可以用deep

data(){
	return {
		userInfo:{
			id:1,
			name:'qdleader'
		}
	}
},

watch:{
	userInfo: {
		handler (newName, oldName) {
			//...
		},
		deep:true,
		immediate:true
	}
}

这里有个不太好的地方。虽然设置了deep：true，我们可以坚挺到userInfo.name的变化。但是此时会给userinfo的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：

watch:{
	'userInfo.name': {
		handler (newName, oldName) {
			//...
		},
		deep:true,
		immediate:true
	}
}

同学问了，监听对象属性还有没有别的方法呢？

别着急呀！

监听对象属性computed也可以帮帮忙的。

computed: {
  getName: function() {
	return this.userInfo.name
 }
},
watch:{
	getName:{
		handler:function(){
			//do something
		}
	}
}

//延伸。。 监听路由变化：

watch:{
      '$route.path':function(newVal,oldVal){
        //console.log(newVal+"---"+oldVal);
        if(newVal === '/login'){
          console.log('欢迎进入登录页面');
        } else if(newVal === '/register'){
          console.log('欢迎进入注册页面');
        }
      }
 }
或者：
watch:{
  $route(to,from){
    console.log(to.path);
  }
},

即使道路坎坷不平,车轮也要前进;即使江河波涛汹涌,船只也航行。 最后，前端有兴趣的可以关注下，也可以加群，一起成长。还有https://github.com/qdleader/qdleader[https://github.com/qdleader/qdleader]