对比两个对象两种原生方法_vue3 比较两个 obj是否有变化-优快云博客

本文链接：https://blog.youkuaiyun.com/youxiu88_/article/details/133912642

文章介绍了在Vue中使用`reactive`创建对象并使用`deepEqual`进行深比较的方法，以及如何通过`JSON.stringify`处理对象的字符串表示，以判断两个对象是否相等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script setup>
import { reactive, ref } from "vue";
const obj1 = reactive({
  name: "王浩",
  age: 18,
});
const obj2 = reactive({
  name: "王哈哈",
  age: 18,
});
const obj3 = reactive({
  name: "王浩",
  age: 24,
});
const obj4 = reactive({
  name: "王浩",
  age: 18,
});
const obj5 = reactive({
  age: 18,
  name: "王浩",
});
console.log(deepEqual(obj1, obj2)); // false
console.log(deepEqual(obj1, obj3)); // false
console.log(deepEqual(obj1, obj4)); // true
console.log(deepEqual(obj1, obj5)); // true


// 递归
function deepEqual(obj1, obj2) {
  // 检查类型和属性数量
  if (typeof obj1 !== typeof obj2) {
    return false;
  }
  if (Object.keys(obj1).length !== Object.keys(obj2).length) {
    return false;
  }

  // 遍历对象的属性
  for (let key in obj1) {
    // 检查属性值的类型
    if (typeof obj1[key] !== typeof obj2[key]) {
      return false;
    }

    // 如果属性值是对象，则递归比较
    if (typeof obj1[key] === "object" && obj1[key] !== null) {
      if (!deepEqual(obj1[key], obj2[key])) {
        return false;
      }
    }

    // 检查普通属性值的相等性
    if (obj1[key] !== obj2[key]) {
      return false;
    }
  }

  return true;
}



// 字符串对比
const obj00 = reactive({ name: "Alice", age: 25 });
const obj11 = reactive({ name: "Alice", age: 25 });
const obj22 = reactive({ age: 25, name: "Alice" });

const str1 = JSON.stringify(obj00);
const str2 = JSON.stringify(obj11);
const str3 = JSON.stringify(obj22);

const isSame = str1 === str2;
const isSame1 = str1 === str3;
console.log(str1, "1");
console.log(str2, "2");
console.log(str3, "3");
console.log(isSame, "字符串1"); // true
console.log(isSame1, "字符串2"); // true
</script>