VUE watc方法监听+JSON拷贝实现 检测对象是否被修改过

这里只讲述如何解决对象的监听，首先模拟一个需求场景，如图：

其实数据量很少的情况下可以只需要每个input都增加一个@input事件，但是数据量多的情况下会非常繁琐

---

我也借鉴了很多通过深拷贝浅拷贝的方法，实现起来稍微繁琐了一些，如果想判断对象中是什么字段的值发生变化可能需要使用watch和computed两种方式结合起来可以实现，vue官方也给出过关于这方面的答案以及原因

---

说了那么多，要讲一下我认为最简单的方式了，那就是将数组转为字符串，我直接贴代码

1、HTML按钮上绑定的值

<el-button :disabled="!isDisable" @click="preservation" type="primary">保存</el-button>

2、data中的数据

data() {
      return {
        wxData:{},
        wxDataCopy:{},
        isDisableWx:false,
      };
    },

3、watch监听

//watch时将深拷贝的数据和newVal都push到数组中进行判断
watch:{
      wxData: {
        handler: function(newVal) {
          let arr1 = []
          let arr2 = []
          //遍历对象
          for (let key in newVal) {
            arr1.push(newVal[key])
          }
          for (let key in this.wxDataCopy) {
            arr2.push(this.wxDataCopy[key])
          }
          //按钮状态
          this.isDisableWx = JSON.stringify(arr1) == JSON.stringify(arr2) ? false : true
        },
        deep: true
      }
      
    },

//从后端获取第一次加载的数据
created() {
      getconfigKeys().then(res => {
        res.msg = JSON.parse(res.msg)   //这段忽略
        this.wxData = res.msg   //watch监听时的newVal（arr1）
        this.wxDataCopy = JSON.parse(JSON.stringify(this.wxData))  //对比newVal（arr2）
      })
    },

//最后保存完毕后别忘记置空wxData和wxDataCopy、重新调用一下请求接口，不然数据不会触发watch渲染按钮的状态哦~

最后希望各位大佬批评指教。