Vue2实时监听表单变化的示例讲解

<template>  <section>    <el-dialog :title="formTitle" :visible.sync="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">确 定</el-button>      </div>    </el-dialog>  </section></template>

<script>    export default {    props: ["dialogFormVisible","form","formTitle"],    data() {      return {        unChange: true,        preForm: JSON.parse(JSON.stringify(this.form)) //深拷贝对象      };    },    watch: {      form:{        handler:function(nowVal,oldVal){          var $this = this;          for(let i in $this.form){            if(nowVal[i] != $this.preForm[i]) {              $this.unChange = false;              break;            }else {              $this.unChange = true;            }          }        },        deep:true      }    },    methods: {      addSubmit() {        var $this = this;      }    },    mounted() {      var $this = this;    }  };</script>