相信大多数人在`vue`中都遇到过一个问题,就是对象变量`a`赋值给一个新的变量`b`,在修改`b`属性时 `a`也被修改了 <br/> 这个准确的说不是`vue`的特点, 而是`js`的,估计是为了性能和效率优化,当对象变量赋值时,传递的是`引用`,相当于两个变量指向共同一个内存地址; <br/> <br/> 所以导致了, 上述问题的发生; 然而在js的`5个基础类型`中并不会使用`引用赋值`, 而且解决办法就是用`深浅拷贝` ## 浅拷贝 ```javascript Object.assign() ``` 如果我没记错的话, 好像是`es6`的特性, 浏览器要考虑ie和老旧浏览器解释引擎的问题; `nodejs` `typescript`之类的不用考虑, 他们会经过一个编译的工序使其兼容较早的`es`规范 <br/> <br/> **使用示例** ``` let test = { name: 66, sex:0} let woc = Object.assign({}, test) woc.sex = 7 console.log(woc) console.log(test) ---- { name: 66, sex: 7 } { name: 66, sex: 0 } ``` **注意**:叫`浅拷贝`是有原因的, 它只能让一维属性不采用`引用方式`,如果你的对象中包涵`对象、数组`请使用深拷贝 ## 深拷贝 ```javascript JSON.stringify() JSON.parse() ``` 把对象变量转换成字符串, 再解析给另一个变量。 完全重新解析的, 自己申请开辟内存空间,就是感觉上不怎么优雅; ```javascript let test = { name: 66, sex:0} let woc = JSON.parse(JSON.stringify(test)) woc.sex = 5 console.log(woc) console.log(test) --- { name: 66, sex: 5 } { name: 66, sex: 0 } ```