Vue.js中，watch的深度监视

由于小编结婚以及家事的原因。中途有好长时间停止了更新，今天 小编又回来了。今天带大家来了解一下vue.js中watch监听事件的使用。

handler、immediate的用法

<div>
     <h2>今天天气很{{info}}</h2>
   	 <button @click="isHot = !isHot">点我</button>
</div>
 
new Vue({
  el: '#root',
  data: {
  	return{
	 	isHot: true
	}
  },
  computed: {
    info() {
      return this.isHot ? '炎热' : '凉爽';
    },
  },
watch: {
    isHot: {
      immediate: true,  //配置项immediate代表立即执行
      handler(newVal, oldVal) {
        console.log('isHot发生了变化', newVal, oldVal);
      },
    },
  }
})

上面的代码显示的效果是当我们点击button按钮的时候，改变了一下data中isHot的值，我们监听的是isHot属性，当isHot的值哦发生改变的时候，就会调用handler，我们控制台就会输出’isHot发生了变化’，handler接收两个参数newVal, oldVal，一个是新值，一个是旧值，当然这两个值并不是我们必须的，需要用的时候就接收，不用不接收也无妨。

当然，这里 watch 的一个特点是，最初绑定的时候是不会执行的，要等到 isHot 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢，上面配置项里面加了immediate，它的意思就是让handler立即执行一次，什么意思呢，意思就是如果isHot值不发生改变的时候，handler就不会调用，但是加上immediate，只要我们刚进页面handler就是执行一次。

就拿我们上面的代码为例，如果immediate为false的时候，并且isHot没有发生改变的时候，控制台是不会不会输出的，当我们点击按钮的时候，这时候控制台输出的事 ‘isHot发生了变化’, false, true ，但是当immediate为true的时候，不点击按钮的时候，控制台输出的是 ‘isHot发生了变化’, true, undefined 。

deep属性

今天的重点，watch里面还有一个重要的属性deep，代表是否深度监听，默认为false，什么意思呢，直接上代码。

<div>
     <h2>今天天气很{{info}}</h2>
   	 <button @click="isHot = !isHot">点我</button>
</div>
 
new Vue({
  el: '#root',
  data: {
    return{
    	numbers:{
    		a:1,
    		b:2，
    		......
    	}
    }
  },
  watch:{
      numbers:{
          deep:true, // 深度监视，可以监视一层级以上的
          handler(){
              console.log('numbers改变了')
          }
      }
  }
})

现在我们有这么一个需求，就是我们想监听numbers里属性的变化该怎么写，好多小伙伴都会这样写：

watch:{
      numbers:{
          handler(){
              console.log('numbers改变了')
          }
      }
  }

我可以明确的告诉大家。这样写诗不对的，不相信你可以在控制台上面修改一下numbers.a的值，控制台是不会输出console.log(‘numbers改变了’)，为什么这样写不对呢，因为Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到，比如我们在 mounted事件钩子函数中对obj进行重新赋值：

mounted: {
  this.obj = {
    a: 456
  }
}
这样写的话是可以监听到numbers变化的

有的同学说了，小编傻啊，可以这样写：

watch:{
      'numbers.a':{
          handler(){
              console.log('numbers改变了')
          }
      }，
      // 如果想监听b：
      'numbers.b':{
          handler(){
              console.log('numbers改变了')
          }
      }，
      ...........
  }

不满你说，这样写也可以，但是小编建议你不要这么写，为什么呢，万一我下面还有一万个属性呢？你也要写一万个吗？除非你只是监听numbers对象下的某一个或者两个属性的时候这种方法是可以的。但是我们现在想要的效果是只要numbers对象下的某个属性的值发生改变的时候执行某些操作，这个方法是不可行的。
这个时候我们只需要在numbers对象里添加一个配置项deep就可以监听numbers了：

watch:{
      numbers:{
   		deep:true,
        handler(){
            console.log('numbers改变了')
        }
      }
  }

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器,这样只要我们numbers对象中任意一个属性值发生变化就会被监听到。

今天的分享就到这里，希望大家能借鉴，也希望大家多多提宝贵意见，感谢大家的参考。