相信大多数人在`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 } ```