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]