An example explanation of Vue2 real-time monitoring form changes

<template>
  <section>
    <el-dialog :title="formTitle" :="dialogFormVisible" :before-close="cancel">
      <el-form :model="form" :rules="rules" ref="form">
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="addSubmit" :loading="addLoading" :disabled="unChange">Confirm Certainly</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>  
  export default {
    props: ["dialogFormVisible","form","formTitle"],
    data() {
      return {
        unChange: true,
        preForm: (()) //Deep copy object      };
    },
    watch: {
      form:{
        handler:function(nowVal,oldVal){
          var $this = this;
          for(let i in $){
            if(nowVal[i] != $[i]) {
              $ = false;
              break;
            }else {
              $ = true;
            }
          }
        },
        deep:true
      }
    },
    methods: {
      addSubmit() {
        var $this = this;
      }
    },
    mounted() {
      var $this = this;
    }
  };
</script>