vue判断elementui中的el-form是否有更新变化，如果更改了，会提示是否保存，如果没有改变，它会直接离开

问题描述在我们的项目中，会遇到这样的问题。用户输入填写，要求是：如果用户在表单中输入内容，但是没有点击保存，突然想离开这个页面，会提示他是否保存。这时候就需要判断窗体的内容是否发生了变化，并进行相应的逻辑控制。本文分三种情况简要说明如何判断表单是否发生变化。情况1、判断新增页面的表单是否发生变化。为空，所以我们只需要判断变化前后的表格值是否不为空即可。HTML部分js部分案例2判断编辑页面的形式是否发生变化编辑页面html部分与新增页面相同html部分与js部分相同三、使用this.$options.data()判断this.$options.data()会存储组件的初始数据值，所以使用this判断初始值和后续值是否一致也是可以的data(){return{form:{名称:"",地区:"",},};},方法：{exit(){让initForm=JSON.stringify(this.$options.data().form);让afterForm=JSON.字符串化（this.form）；if(initForm==afterForm){console.log("表单没有变化，直接退出");}else{console.log("表单发生变化，请问是否保存？");}},},另外this.$options.data()还可以重置data中的所有数据，有点页面初始化的感觉，如：Object.assign(this.$data,this.$options.数据（））。记住，不能直接赋值，不能这样写：this.$data=this.$options.data();单个表单数据是：this.form=this.$options.data().form;综合控制可以结合vue路由的拦截钩子，beforeRouteLeave。具体情况具体分析，本文只简单介绍三种思路，具体怎么做要看业务场景和需求。2021，大家一起加油