监听数组变动并触发额外任务：使用Proxy实现数据持久化

代理拦截数组操作，长度变化触发持久化。

代理拦截数组集并将其传递给处理程序。
如果通过推送或拼接修改了数组长度，则设置的陷阱将触发持久性。
示例：sessionStorage 存储 JSON.stringify 数组。

初始化：从sessionStorage读取数据。
否则数组为空。
代码： construshList = JSON.parse(sessionStorage.getItem('crumbs') null) []；
创建代理： this.crumbs = 新代理(crumbList, { 设置（对象，道具，值）{ const 结果 = Reflect.set(...arguments); if (prop === '长度') { sessionStorage.setItem('crumbs', JSON.stringify(crumbList)); } 返回结果； } });
自定义valueOf：返回浅拷贝以避免直接操作。
Object.defineProperty(this.crumbs, 'valueOf', { 值： function() { return [...crumbList]; } });
set Trap：拦截所有属性分配并确保 Reflect.set 默认行为。
如果 prop 很长，则会触发持久性。

永久存储：JSON.stringify存储在sessionStorage中。
示例：push、length=5 和 splice 均被触发。

示例任务： env.crumbs.push(crumb); // 添加对象 env.crumbs.push('foo'); // 添加字符串 env.crumbs.length = 5 ; // 长度修改和持久化触发删除操作：Shift和Pop减少长度并同步更新存储。
访问操作：删除和保存项目反映最新状态。

注意： 代理会产生性能开销，因此请小心频繁修改。
较旧的浏览器不支持此功能，需要降级解决方案。
如果直接修改原数组，则不会触发陷阱。

扩展场景： 状态管理：结合Vue/React来同步本地存储。
撤销操作：记录历史状态并支持回滚。
数据验证：设置陷阱和验证逻辑。

完整代码： JavaScript 班级环境{ 构造函数（）{ construshList = JSON.parse(sessionStorage.getItem('crumbs') null) []； this.crumbs = 新代理(crumbList, { 设置（对象，道具，值）{ const 结果 = Reflect.set(...arguments); if (prop === '长度') { sessionStorage.setItem('crumbs', JSON.stringify(crumbList)); } 返回结果； } });
Object.defineProperty(this.crumbs, 'valueOf', { 值： function() { return [...crumbList]; } }); } }
//测试运行 const env = 新环境(); env.crumbs.push({ metricId: 6 , 概念: '缺货' }); env.crumbs.push('foo'); env.crumbs.length = 5 ; console.log('推送和长度更改后：', env.crumbs.valueOf()); env.crumbs.splice(1 , 3 ); console.log('加入后：', env.crumbs.valueOf()); console.log('保存的 JSON:', sessionStorage.getItem('crumbs'));
自己掂量一下。

v2和v3版本区别

后来我才意识到...这些东西...我正在开发...2 02 2 年...在一个小城市...
vue2 ...就是这样...Object.defineProperty...我看到...对象属性...遍历...问题...数组push，pop...我必须自己写...令人沮丧...
然后vue3 ...使用代理...直接代理整个对象...真的很酷...添加属性，删除属性...都可以拦截...感觉...很好...
数据定义...vue2 ...data(),method()...怎么分类...都一头雾水...
vue3 ...setup()...这个...代码组织...变量，方法...都需要返回...但是没有...一开始...很迷茫...
用了之后...真是...灵活...划分功能...比以前清晰多了...
性能...vue3 ...懒观察...初始渲染...数据观察器...感觉...启动快...
vue2 ...全视图...大型应用程序...启动慢...这...区别很明显...
生命周期...vue3 ...onMounted...命名这个...简洁...
vue2 ...创建、安装...直接调用...
项目结构...vue3 ...目录...new...public...src/views...清晰...
TypeScript...vue3 ...原生支持...检查...
PWA...渐进式 Web 应用程序...支持...
摇树...打包大小...减少...
参考，反应式...碎片化的API...逻辑重用...
就是这样...