Vue中 watch原理以及使用

先来看这段代码，

courseForm: {
        //表单中的内容
        courseName: "",
        courseStartTime: "",
        courseDepId: "",
        teacherId: "",
        courseComment: "",
        addressId: "",
        teacherName: "",
        id: ""
      } 

watch: {
    courseForm: {
      handler(v) {
        console.log("courseForm中的handler正在执行")
        console.log(v)
      }
    }
}

这段代码就是一个正常的VUE中courseForm表单变化的一个监听，只有当courseForm的引用被改变时，才会触发courseForm中的handler方法，注意我这里说的是引用被改变，可以简单理解为Java中的引用。

需求一：我想courseForm在watch中首次绑定的时候，就执行handler

可以使用immediate:true，代表如果在wacth里声明了courseForm之后，就会立即先去执行里面的handler方法，如果为false就跟我们以前的效果一样，不会在绑定的时候就执行。

修改后的代码：

courseForm: {
        //表单中的内容
        courseName: "",
        courseStartTime: "",
        courseDepId: "",
        teacherId: "",
        courseComment: "",
        addressId: "",
        teacherName: "",
        id: ""
      } 

watch: {
    courseForm: {
      handler(v) {
        console.log("courseForm中的handler正在执行")
        console.log(v)
      },
	  //代表在wacth里声明了courseForm这个方法之后立即先去执行handler方法
      immediate: true
    }
}

需求二： 当我courseForm中的任何一个字段发生改变的时候，我希望watch可以监听到

目前的问题是，就是我这个courseForm，是一个对象，里面有很多字段，当我代码如下时

<div>
      <p>courseForm.id: {{courseForm.id}}</p>
      <p>courseForm.id: <input type="text" v-model="courseForm.id"></p>
</div>

我在input中改变courseForm.id时，因为我的courseForm是写在data中的，所有数据双向绑定是生效的，但是默认情况下handler只监听courseForm这个对象他的引用的变化，我们只有给courseForm赋值的时候它才会监听到（可以理解为Java中引用对象改变引用地址的形式)，但是我想当courseForm中的某个字段改变的时候，我就可以通过watch监听到courseForm中的变化，这时候就需要用到deep属性了，代码如下

courseForm: {
        //表单中的内容
        courseName: "",
        courseStartTime: "",
        courseDepId: "",
        teacherId: "",
        courseComment: "",
        addressId: "",
        teacherName: "",
        id: ""
      } 

watch: {
    courseForm: {
      handler(v) {
        console.log("courseForm中的handler正在执行")
        console.log(v)
      },
      deep: true
    }
}

deep的意思是深入观察，监听器会一层层的往下遍历，给对象中的所有字段都加上这个监视器，但是这样性能开销就非常大了，修改courseForm中的字段都会触发这个监听器里的handle方法。

需求三： 当courseForm中的指定字段发生改变的时候，我希望watch可以监听到

需求二中是监听courseForm中的所有字段，如果想监听某一字段，我们可以是使用字符串形式监听。比如监听id字段，代码如下

  watch: {
    'courseForm.id': {
      handler(v) {
        console.log("courseForm中的id被改变了")
        console.log(v)
      },
      deep: true
    }
}

这样Vue.js才会一层一层解析下去，直到遇到字段id，然后才给id设置监听函数