实现效果

描述 ：监听form表单中一个值的变化，清空某个值

  watch:{
    'form.callPoliceSort':function(newValue){
     // 监听form表单中callPoliceSort字段值的变化，变化了将需要清空的值进行清空
      console.log('newValue',newValue);
      this.form.callPoliceType = '';
      this.form.callPoliceClass = '';
    }
  },

在Vue中有一个watch方法可用于监听数据的改变，避免重复添加监听函数，watch中有三种监听数据的方式：

1、常用型（浅层监听）

 如此即可监听loading值的变化，并进行相应操作。

2、深层监听（利用deep属性）

 这样利用deep属性，将deep设为true，则可进行深层监听，只要modalForm中任意一个属性的值发生改变，则都会调用handler函数，当然该函数名可随意。

3、深层监听某一个特定属性（用字符串表示对象属性的调用）

此时只会监听modalForm里面的model属性，当他的值发生改变时才会执行回调函数。

4、利用computed计算属性

 此时在添加了计算属性后，可以像浅层监听一样的方式监听深层的model属性值的改变。

   created(){
        if(this.$route.params && this.$route.params.id){
            //从路径获取id值
            const id =this.$route.params.id
            //调用根据id查询的方法
            this.getInfo(id)
        }else{//路径中没有id
            //清空清单
            this.teacher={}
        }
        }

当进行路由跳转，两次都跳转到一个页面的时候，在页面渲染之前执行的created()方法只会在第一次的时候执行

如上图代码第一次跳转的时候

如图所示路径中是有id值的，所以执行上述代码中if中的代码片段

当前几添加讲师的时候

如图所示是没有id值的，应该执行else中的代码片段，但是，前面已经说了第二次执行的时候不会执行created()的所以不会执行else中的代码片段，所以得使用watch监听器

修改代码

 created(){
        this.init()
    },

     */
    watch:{//路由监听
        $route(to,from){//路由变化方式，路由发生变化的时候，方法就会执行
            this.init()
        }
    },


 methods:{
        init(){
             //判断路径中是否有id'值
        if(this.$route.params && this.$route.params.id){
            //从路径获取id值
            const id =this.$route.params.id
            //调用根据id查询的方法
            this.getInfo(id)
        }else{//路径中没有id
            //清空清单
            this.teacher={}
        }
        },
    }

    watch路由监听就是当路径发生改变得时候执行
     这样做的话，当第一次点击有id值的时候执行created->init()中的if中的方法，当再此页面中点击修改的时候，路由发生了改变，则被 watch路由监听器监听执行监听器中的方法，监听器中的方法与created中的一样，只不过是路径中没有id'值了，所以执行的是init中的else语句。从而实现执行this.teacher={}