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]

 

posted on 2020-07-16 10:54  前端架构师  阅读(1139)  评论(0编辑  收藏  举报

导航

  • !