vue深度监听（监听对象和数组的改变）与立即执行监听。

 1.vue中监听对象数据属性值的改变，可以使用深度监听

  data () {
    return {
      form: {
        status: '',
        cpufrequency: '',
        systemstacksize: '',
        scalabilityclass: ''
      }
    }
  },
  watch: {
    form: { // 深度监听
      handler(val, oldVal){
        console.log('currentForm',val, oldVal)
        // 但是这两个值打印出来却都是一样的,因为它们的引用指向同一个对象/数组
      },
      deep:true
    }
  }

注意：我们应避免在监听方法中更改当前监听对象的属性值，以免再次触发监听函数

2.若只监听某个或部分属性值的变化，则可以配合计算属性computed来解决

  data () {
    return {
      form: {
        status: '',
        cpufrequency: '',
        systemstacksize: '',
        scalabilityclass: ''
      }
    }
  },
  computed: {
    status() {
      return this.form.status
    }
  },
  watch: {
    status() {
      console.log('currentVal', this.status)
    }
  }

当然，上面这种方式会多出一个计算属性，对于只有单个变化因素的场景，并不是最好的解决方式，通过查看官方api，其实还有一种方法：

  data () {
    return {
      form: {
        status: '',
        cpufrequency: '',
        systemstacksize: '',
        scalabilityclass: ''
      }
    }
  },
  watch: {
    'form.status'(val, oldVal) {
      console.log('currentVal', val)
    }
  }

对于有多个变化因素的场景，仍然可以考虑使用计算属性的方式，这样可以减少重复执行监听操作代码，但会增加一个计算属性，这是一种空间换时间的优化思想。

  data () {
    return {
      form: {
        status: '',
        cpufrequency: '',
        systemstacksize: '',
        scalabilityclass: ''
      }
    }
  },
  computed: {
    watch_scalabilityclass() {
      return (
        this.form.status + '_'
        + this.form.cpufrequency
      )
    }
  },
  watch: {
    watch_scalabilityclass() {
      // do something
    }
  }

3.取消监听

var unwatch = vm.$watch('a', cb) // 返回一个取消监听函数
unwatch() // 取消观察函数

4.立即触发监听

 我们有时会有这个需求，在页面初始化时执行某个监听。因此，我们可能会在 created 中去调用需要执行的监听代码，但现在我们可以使用 immediate 来实现这个功能。

  watch: {
    'form.status'() {
      handler(val, oldVal) {
        // 执行一些操作
      },
      immediate: true
    }
  }