Vue入门【二】-- watch侦听器之普通监听与深度监听

监听器（侦听器）

侦听器是vue提供的一个简便通用的响应数据变化的方法。

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的 。

监听器的写法：  

• 设有两个参数，一个是改变后的数据，一个是改变前的数据

a(newVal,oldVal){
					
				}

• 在监听器中，被监听的变量除了可以写成函数，还可以是一个对象

要监听的变量名称:{
                    handler(){ 
      
                    }
                },

   // 其中handler是固定的配置选项，不能改变它的名称

 普通监听

普通监听只能监听到基本数据类型的变化，例如：number、boolean、string

用代码实现一个普通监听：

	
	
	
	
	


	

		
		
		{{total}}
	
	

 深度监听

当被监听的内容是引用数据类型时，watch里面msg（）{ } 这种形式只是普通的浅监听，无法满足我们的需求，因此我们需要使用深度监听来实现对数组/对象里的值进行监听。给监听器添加一个deep属性，默认值是false，当我们将其设置为true时深度监听生效。

用代码实现一个深度监听：

当实现了深度监听时，obj对象中的属性值也会随着我们的操作而发生变化。 

 注意：

• handler: 固定方法触发. 侦听函数必须叫handler(必写)
• deep: 开启深度侦听(必写)
• immediate: 立即侦听(页面初始化时handler立即执行一次)

computed与watch的区别：

1. 功能：computed是计算属性，watch是监听一个值的变化而执行对应的回调
2. 是否调用缓存：computed函数所依赖的属性不变的时候会调用缓存；watch每次监听的值发生变化时候都会调用回调
3. 是否调用return：computed必须有；watch可以没有
4. 使用场景：computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框
5. 是否支持异步：computed函数不能有异步；watch可以