表单提交验证是否修改

表单提交时，如果没发生变化，则不算有效修改，不保存

场景：修改记录历史版本的场景，这时需要判断是否修改，如果没修改则不记录历史版本

🧠 排序规则

Object.keys(obj).sort()

也就是说：

把对象的所有 key 提取出来，然后按 Unicode 字符编码顺序排序。

这其实就是 JavaScript 默认的 字典序（alphabetical order）排序。

---

✅ 实现方案

🧩 1. 工具函数：normalizeObject

function normalizeObject(obj) {
  if (Array.isArray(obj)) {
    return obj
      .map(item => normalizeObject(item))
      .sort((a, b) => JSON.stringify(a).localeCompare(JSON.stringify(b)));
  } else if (obj !== null && typeof obj === 'object') {
    const result = {};
    Object.keys(obj)
      .filter(key => {
        const value = obj[key];
        return value !== undefined && value !== null && value !== '';
      })
      .sort()
      .forEach(key => {
        result[key] = normalizeObject(obj[key]);
      });
    return result;
  } else {
    return obj;
  }
}

---

✅ 2. Vue 示例组件（改进版）

export default {
  data() {
    return {
      form: {
        name: '',
        age: null,
        tags: [],
        info: {
          city: '',
          postal: null
        }
      },
      normalizedOriginalForm: null
    };
  },
  mounted() {
    // 初始化时只做一次 normalize 和深拷贝
    const originalCopy = JSON.parse(JSON.stringify(this.form));
    this.normalizedOriginalForm = normalizeObject(originalCopy);
  },
  methods: {
    hasFormChanged() {
      const currentCopy = JSON.parse(JSON.stringify(this.form));
      const normalizedCurrent = normalizeObject(currentCopy);
      return JSON.stringify(normalizedCurrent) !== JSON.stringify(this.normalizedOriginalForm);
    },
    onSave() {
      if (this.hasFormChanged()) {
        console.log('表单有变更，执行保存');
        // 保存逻辑
      } else {
        console.log('表单无变更');
      }
    }
  }
};

#