vue深度监听(监听对象和数组的改变)与立即执行监听实例

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

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

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

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

 data:{
    testData:{
      dataInfo:{
        a: '我是a',
        b: '我是b'
      }
    }
  },
  watch: {
   testData: {
    handler: (val, olVal) => {
     console.log('我变化了', val, olVal)
    },
    deep: true
   }
  }

  data:{
    testData:{
      dataInfo:{
        a: '我是a',
        b: '我是b'
      }
    }
  },
  watch: {
   testDataNew: {
    handler: (val, olVal) => {
     console.log('我变化了', val, olVal)
    },
    deep: true
   }
  },
  computed: {
   testDataNew() {
    return JSON.parse(JSON.stringify(this.testData))
   }
  }