vue2的watch监听属性

监听属性：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！（在data里或者computed里）
3.深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

在使用监听属性的时候，大部分的使用场景只用到handler()一个，因此可以简写
以下代码：

watch:{
  isHot:{
	immediate:true, //初始化时让handler调用一下
	//handler什么时候调用？当isHot发生改变时。（一个参数就是newValue）
	handler(newValue,oldValue){
	  console.log('isHot被修改了',newValue,oldValue)
  	}
  }
  //简写
	/* isHot(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue,this)
	} */
  //监视多级结构中某个属性的变化(numbers为对象)
	/* 'numbers.a':{
		handler(){
			console.log('a被改变了')
		}
	} */
  //监视多级结构中所有属性的变化
  numbers:{
    deep:true,
	handler(){
	  console.log('numbers改变了')
	}
  }
}

computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或 组件实例对象。