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
    }
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容