例如,在进行编辑操作时,我们一般是进行数据双向绑定。
当我们点击编辑按钮时,会弹编辑的对话框,我们希望会把原先的数据显示在对话框上,然后我们基于这个原先的内容再进行修改。但是如果我们编辑数据后,没有点确定修改数据,而是点击取消不修改数据,如果不进行深拷贝,往往会导致虽然取消修改,但是原先数据还是会改变。
/
/
/
/
类似于如下的这种dialog弹出框
我们双向绑定的数据是user
当我们点击编辑按钮的时候,会调用handleEdit方法,同时传递参数scope.row就是编辑行的那个对象
/
/
/
/
/
handleEdit方法如下
如果我们通过下面画红线的方法进行对user赋值,这样我们使dialog可见的时候,原来的数据就会显示出来
但是,这两个对象指向了一个地址,我们在dialog弹出框修改数据的时候,原来表格中的数据也会进行修改
所以我们需要使用深拷贝,如下
/
/
/
/
/
/
深拷贝简介如下javaScript存储对象都是存地址的,所以浅拷贝会导致 obj1 和obj2 指向同一块内存地址。改变了其中一方的内容,都是在原来的内存上做修改会导致拷贝对象和源对象都发生改变,而深拷贝是开辟一块新的内存地址,将原对象的各个属性逐个复制进去。对拷贝对象和源对象各自的操作互不影响。
/
/
/
/
/JSON.parse(JSON.stringify(obj))我们一般用来深拷贝,其过程说白了 就是利用JSON.stringify 将js对象序列化(JSON字符串),再使用JSON.parse来反序列化(还原)js对象;序列化的作用是存储(对象本身存储的只是一个地址映射,如果断电,对象将不复存在,因此需将对象的内容转换成字符串的形式再保存在磁盘上 )和传输(例如 如果请求的Content-Type是 application/x-www-form-urlencoded,则前端这边需要使用qs.stringify(data)来序列化参数再传给后端,否则后端接受不到; ps: Content-Type 为 application/json;charset=UTF-8或者 multipart/form-data 则可以不需要 )。