本文主要封装方法，实现用户离开表单编辑页面时弹出提示框，若表单数据发生变化，则提示用户是否保存当前页面的信息，如图：
封装方法：
1 /**
2 * 比较俩个对象之间的差异，项目中多处用到监听表单数据是否改动，故封装此方法
3 * 如果数据改动，则返回新旧对象记录改动字段的新旧值
4 *
5 * by wang
6 * */
7 export function diffObj(obj1, obj2) {
8 function getTypeByObj (obj) {
9 return Object.prototype.toString.call(obj).match(/^\[object ([a-zA-Z]*)\]$/)[1];
10 }
11 function isEmptyObject (obj) {
12 for (let key in obj) {
13 return false;
14 };
15 return true;
16 }
17 if (!obj1 || isEmptyObject(obj1) || !obj2 || isEmptyObject(obj2)) {
18 return null;
19 }
20 let diffRes = {
21 old_val: {},
22 new_val: {}
23 };
24 for (let k in obj2) {
25 // 判断数据类型是否一致
26 if (getTypeByObj(obj2[k]) === getTypeByObj(obj1[k])) {
27 // 比较 “Array”和“Object”类型
28 if (getTypeByObj(obj2[k]) === 'Array' || getTypeByObj(obj2[k]) === 'Object') {
29 const diffData = diffObj(obj1[k], obj2[k]);
30 if (!isEmptyObject(diffData)) {
31 diffRes.old_val[k] = diffData.old_val;
32 diffRes.new_val[k] = diffData.new_val;
33 }
34 } else if (obj1[k] !== obj2[k]) { // 比较其他类型数据
35 diffRes.old_val[k] = obj1[k];
36 diffRes.new_val[k] = obj2[k];
37 }
38 } else {
39 if ([undefined, null, ''].includes(obj1[k]) && [undefined, null, ''].includes(obj2[k])) {
40 // 这三类数据可视为相等，不做处理
41 }else {
42 diffRes.old_val[k] = obj1[k];
43 diffRes.new_val[k] = obj2[k];
44 }
45 }
46 }
47 // 若没有变化，返回null
48 if (isEmptyObject(diffRes.old_val) || isEmptyObject(diffRes.new_val)) {
49 return null;
50 }
51 return diffRes;
52 }
如果返回值为null，则代表没有改变，否则返回改变的属性和值，如图：
脚踏实地行，海阔天空飞~
标签：obj1,obj2,return,val,是否,diffRes,表单,old,监听 From： https://www.cnblogs.com/coder--wang/p/17676509.html