vue監(jiān)聽表單優(yōu)化——周分享

  • vue深度監(jiān)聽表單時候,新老對象的值是相同的。
 watch: {
    form: {
      handle (val, old) {
        console.log(val)   //=>   {'sex':'1','userid':'1'}
        console.log(old)   //=>   {'sex':'1','userid':'1'}
      },
      deep: true
    }
  },

其原因是vue在變異(非替換)數組或對象時,新舊值都指向同一個數組或者對象,vue不會保留變異之前的副本 vue-實例方法-數據

簡單來說:因為數據同源。雖然可以監(jiān)聽到他的變化,但是要比較數據差異就不行了。

  • 如何解決watch 值相同
computed: {
    ChangeForm () { 
      return JSON.parse(JSON.stringify(this.form)) 
    //監(jiān)聽對象返回深拷貝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
    }
  }
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容