vue监听表单优化——周分享

• vue深度监听表单时候，新老对象的值是相同的。

 watch: {
    form: {
      handle (val, old) {
        console.log(val)   //=>   {'sex':'1','userid':'1'}
        console.log(old)   //=>   {'sex':'1','userid':'1'}
      },
      deep: true
    }
  },

其原因是vue在变异（非替换）数组或对象时，新旧值都指向同一个数组或者对象，vue不会保留变异之前的副本 vue-实例方法-数据

简单来说：因为数据同源。虽然可以监听到他的变化，但是要比较数据差异就不行了。

• 如何解决watch 值相同

computed: {
    ChangeForm () { 
      return JSON.parse(JSON.stringify(this.form)) 
    //监听对象返回深拷贝form 指向新的内存地址
   // 如果是数组可以  return [...new Set(selectedArry)]
    }
  },

  watch: {
    ChangeForm: {
      handle (val, old) {
        console.log(val) //=>   {'sex':'1','userid':'1'}
        console.log(old) //=>   {'sex':'2','userid':'2'}
      },
      deep: true
    }
  }