监听引用数据类型变化的方法

通常对于一个引用数据类型的变化是不容易监听到的

无法监听到的原因：

以下是搜集相关资料，感觉比较合适的解释（与堆栈相关）：

1、无法直接监听引用数据类型的变化与堆栈（Heap）的特性有关，具体来说，与对象的内存管理和引用传递有关。

2、在 JavaScript 中，对象是分配在堆内存中的，而变量则存储对对象的引用。引用数据类型的变量实际上保存的是对象在堆内存中的地址。当我们通过变量访问对象时，实际上是通过引用到对象的地址来访问对象的内容。

3、由于引用传递的特性，我们不能直接监听到对对象内部属性的修改，因为对象的引用未发生变化，只是指向的对象的内容发生了变化。而属性访问器（get 和 set 方法）是基于属性的读取和设置的，而不是基于引用的。

4、这与堆栈的概念有关，因为堆内存中存储了对象的实际数据，而堆栈中存储了对对象的引用。当对象内部发生变化时，虽然堆内存中的内容变了，但对象的引用仍然保持不变，因此属性访问器无法直接捕捉到这种内部变化。

如果想要监听引用数据类型的变化就需要深度比较，更细粒度地追踪对象内部的变化。

监听方法：

1、lodash.isEqual

`lodash.isEqual` 是 Lodash 库中的一个函数，用于执行深度比较两个对象是否相等。

①安装 Lodash

使用 npm 或 yarn 进行安装：npm install lodash 或者 yarn add lodash

②使用 `lodash.isEqual`

// 引入 lodash

const isEqual = require('lodash/isEqual');

// 示例对象

const obj1 = { name: 'John', age: 30, address: { city: 'New York', zip: '10001' } };

const obj2 = { name: 'John', age: 30, address: { city: 'New York', zip: '10001' } };

const obj3 = { name: 'Jane', age: 25, address: { city: 'Los Angeles', zip: '90001' } };

// 使用 lodash.isEqual 进行深度比较

console.log(isEqual(obj1, obj2));

// true，obj1 和 obj2 是深度相等的

console.log(isEqual(obj1, obj3));

// false，obj1 和 obj3 不是深度相等的

2、JSON.stringify

下文obj1/obj2/obj3与上文一致

 // 使用 JSON.stringify 进行深比较

const str1 = JSON.stringify(obj1);

const str2 = JSON.stringify(obj2);

const str3 = JSON.stringify(obj3);

console.log(str1 === str2); // true，obj1 和 obj2 是深度相等的

console.log(str1 === str3); // false，obj1 和 obj3 不是深度相等的

缺点：

• 性能开销： 每次深比较都需要将对象转换为字符串，然后进行字符串比较，可能会导致性能开销较大。
• 不适用于包含函数或循环引用的对象： JSON.stringify 无法处理包含函数的对象，而且对于循环引用的对象，会抛出错误。

3、react-fast-compare

`react-fast-compare` 是一个专门用于快速比较两个对象是否相等的库，尤其在 React 组件中常被使用以提高性能。相较于 `JSON.stringify` 等方法，`react-fast-compare` 的性能更好，并且能够处理一些特殊情况，如循环引用和日期对象等。

①安装 `react-fast-compare`：

可以使用 npm 或 yarn 进行安装：npm install react-fast-compare或yarn add react-fast-compare

②使用：

import isEqual from 'react-fast-compare';

const obj1 = { name: 'John', age: 30, address: { city: 'New York', zip: '10001' } };

const obj2 = { name: 'John', age: 30, address: { city: 'New York', zip: '10001' } };

const obj3 = { name: 'Jane', age: 25, address: { city: 'Los Angeles', zip: '90001' } };

// 使用 react-fast-compare 进行深度比较

console.log(isEqual(obj1, obj2)); // true，obj1 和 obj2 是深度相等的

console.log(isEqual(obj1, obj3)); // false，obj1 和 obj3 不是深度相等的

使用过程中可根据项目具体需求而选择哪一个。