VUE3 学习笔记（三）js深拷贝、浅拷贝“坑”

由于以前一直使用的是 Pascal 开发对于js中的存在的深拷贝、浅拷贝不知道。对于delphi来说基本变量也好结构变量也好赋值就相当于拷贝了一份。

例如

a := 1;
b := a;
//此时打印a,b分别是 1,1
a := 5;
//此时打印a,b分别是 5,1 也就是说b 只是拷贝了当时的a的值以后a变化不会引起b变化

如果一定要a变化也要引起b变化delphi中需要明确指出需要指针、指针、指针。一般不用指针的话就是简单的拷贝。

但是在js中做了一个项目因为对js深拷贝、浅拷贝的知识盲点导致程序bug很久没有解决遇到了一个坑。js中是没有指针的概念的但是js中基本类型变量的赋值就相当于delphi的变量赋值对象、数组等赋值却相当于delphi中的指针指向这个区别就比较大。

坑的场景是在vue中有两个对象JSON分别是Applicant(投保人)和Insured(被保人)两个对象的结构定义是一样的

//1. 投保人相关
                applicant: {
                    name: 'sensor',     //投保人姓名
                    cardtype: '1',       //证件类型 
                    cardno: '4401',          // 证件号码
                    sex: '1',        //性别
                    birthday: '1980-01-01',        //出生日期
                    mobile: '1334****390',        //手机号码
                    email: 'sen@abc.com',      //邮箱
                    address: '',   //地址
                },
//2. 被保人
                insured: {
                    name: 'sensor',     //投保人姓名
                    cardtype: '1',       //证件类型 
                    cardno: '3203',          // 证件号码
                    sex: '1',        //性别
                    birthday: '1980-01-01',        //出生日期
                    mobile: '133****390',        //手机号码
                    email: 'ser@abc.com',      //邮箱
                    address: '',   //地址
                }

在界面上进行了录入要素绑定当投保人和被保人是同一个人时界面上有switch确定是否是一个人被保人信息录入界面不出现隐藏起来当投保人和被保人不是同一人时两个录入信息界面都会显示出来。出现的bug现象是在某种情况下修改被保人信息投保人信息也同步更改修改投保人信息被保人信息也同步更改这不是我们期望的结果。我们测试又很难测试出来可是现场使用人员有时会出现。一直困扰我们的开发人员注意目前没有办法在电脑上调试因为要使用android设备的一些硬件功能所以只能在设备上看效果否则电脑上很容易跟踪调试。

原因是当被保人和投保人是同一人时系统执行了

this.insured = this.applicant

系统刚开机启动并没有执行上面一句所以测试是没有问题的但是当出了一单被保人和投保人是同一人的保单后上面一句话被执行了bug就出现了。这样导致这两个对象指向了同一个内容地址。从而造成被保人信息更改会同步更改投保人信息。

解决的方法就是需要明白js中的深拷贝、浅拷贝。

将上面更改成

this.insured = JSON.parse(JSON.stringify(this.applicant));

问题解决了 关键是要明白js 中的 深拷贝、浅拷贝。其实在python中也存在这个概念

记录下问题让我们少踩点“坑”所谓坑其实就是自己的知识盲点

感谢弟弟与我讨论并提示我注意js中的深拷贝、浅拷贝。