6.监视属性

监视属性

watch:{
	监视谁:{
	//当被监视对象发生变化时调用
		handler(newValue,oldValue){}
	}
}

vm.$watch('监视谁',{
	immediate:true,
	handler(){
		//balabla
	}
})

• immediate:true, //初始化时让handler调用一下
• @click=‘‘isHot = ! isHot’’ @click后可以加一些简单的语句，省去方法

1. 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2. 监视的属性必须存在，才能进行监视！！
3. 监视的两种写法：
   (1).new Vue时传入watch配置
   (2).通过vm.$watch监视

深度监视

• 监视多级结构中某个属性的变化
  • 想监视的属性是 numbers:{a:1,b:2} 里的a

watch:{
	'numbers.a':{handler(){}}
}

• 想监视 numbers里的所有属性
  • 按上面方法，如果属性有很多个，一个一个写就很麻烦
  • 如果直接watch:{numbers:{}}这样只能监测numbers的地址变换，要彻底替换掉numbers才能触发
  • 所以应该用deep:true开启深度监视，numbers里的属性一变，就触发
• Vue可以检测到多层级数据的改变，但是watch不行

1. Vue中的watch默认不监测对象内部值的改变（一层）。
2. 配置deep:true可以监测对象内部值改变（多层）。
   备注：
   (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！为了效率
   (2).使用watch时根据数据的具体结构，决定是否采用深度监视。

监视属性的简写

• 当不需要immediate和deep配置项时，可以使用简写

watch:{
	监视谁(){
		//写handler里的东西
	}
}

vm.$watch('监视谁',function(newValue,oldValue){
	//handler里的东西
})

与计算属性对比

watch:{
	firstName(val){
		setTimeout(()=>{
			console.log(this)
			this.fullName = val + '-' + this.lastName
		},1000);
}

• 监视属性更灵活，可以加异步定时器
  • 定时器的回调函数要写成箭头函数；
  • 回调函数不受vue管理，由js引擎来调用；
  • 如果写成普通函数，里面的this是window对象；
  • 箭头函数没有自己的this，所以里面的this会向外找，找到vm对象；
• 计算属性是靠返回值，不能整这些，但是更简单

computed和watch之间的区别：

1. computed能完成的功能，watch都可以完成。
2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。