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>