watch 监听函数

1.在vue框架中有watch监听函数，用来监听数值的改变，监听对象可以是一个变量也可以是一个对象。我此次项目中监听的是日期选择器的变化。

2.监听器（watch）是一个对象，要当成对象来使用。

3.watch监听的函数接受两个参数：handler:function(newVal,oldVal)，第一个参数表示改变后的新值，第二个参数表示改变前的值。监听的数据必须是data中声明过的或者是父组件向子组件传递过来的props中的数据，监听函数有两个参数：

1>. immediate：组件加载立即触发回调函数执行(当值在第一此绑定时并不会执行监听函数，只有值发生改变时才会执行，若需要当最初绑定值时也执行该函数需要用到immediate属性)
2>. deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

eg: 监听属性

<el-col :span="8" :offset="2">
							<el-form-item label="实际开工日期" prop="sjkgrq">
								<el-date-picker v-model="ruleForm.sjkgrq" type="date" :validate-on-rule-change="false"
									value-format="yyyy/MM/dd" format="yyyy/MM/dd" placeholder="选择项目开工日期" :picker-options="KGTime"
									:disabled="form.disabled" style="width:256px;">
								</el-date-picker>
							</el-form-item>
</el-col>

watch: {
	"ruleForm.sjkgrq": {
		handler: function (val) {
			if (val) {
				this.isClick = false;
			} else {
				this.isClick = true;
			}
			deep: true;
		},
	},

此时我监听的是ruleFrom对象中的一个属性值：sjkgrq，使用字符串的形式监听对象属性（这样只会给对象的某个特定的属性加监听器），也可以监听ruleFrom的变化，此时会给ruleFrom的所有属性都加上这个监听器，每个属性值的变化都会执行handler。

···数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。