watch的多样用法前言最近在项目里需要监听用户信息的输入，若全部输入则按钮可点击，按理说是个简单的需求，但我却踩了个

前言

最近在项目里需要监听用户信息的输入，若全部输入则按钮可点击，按理说是个简单的需求，但我却踩了个坑，在信息变化时控制按钮是否可点击的属性却无法更新。例如用户信息如对象form。

form{
  name:'',
  age:''
}
//在vue里，我对他的监听如下
watch:{
	form(){
  	//do something
  }
}

出的问题其实也很简单，就是只监听了form这个对象，而对象内部的变化难以被监听到。在回顾vue官方文档后，修改如下。

watch:{
	form:{
    handle(new,old){
  		//do something
  	},
    deep:true
  }
}

开启deep选项后，就可以监测内部的属性变化，从而触发回调。这次问题主要原因是对watch用法了解比较浅薄。于是借着这次机会回顾watch的各类选项。

watch:{
	form:function demo(){
  	//do something
  }
}

基础版可以实现对大部分表达式进行监听，但如果是监听对象，无法监测其变化

watch:{
	form.name:function demo(){
  	//do something
  }
}

对象部分属性监听版可以使用来监听对象特定的属性时使用。

watch:{
	form:{
  	handle(){
    	//do something
    },
    deep:true
  }
}

对象全部属性监听版,适用于对象所有属性都需要监听时使用，但性能消耗也较大。

watch:{
	form:{
  	handle(){
    	//do something
    },
    immediate:true
  }
}

立即触发版将以目前值触发一次回调。

以上便是对watch一些用法的总结！