解决子组件改变传递的值，父组件的值也会跟着改变的情况

今天在没事重新翻阅 vue的开发文档的时候，发现一个很好玩的东西，很开心，也感觉有必要记录一下，也给大家分享一下，避免大家踩坑

文档说：

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

这句话咋一看好像是说vue的组件传值不在准守但想数据流这个规则，其实不是这样的，上面讲了，是引用数据类型，不在遵守这个规则。

为什么？

这就要说说vue的组件传值对于引用数据类型来说，是一个 浅拷贝。

首先我们要知道，js中所有的基本数据类型，像Undefined Null boolean number string 这五种基本数据类型是存储在栈内存里面的

比如

const  nameTest = `123`

在内存栈中是这样表示的

name	value
nameTest	123

但是 引用数据类型 object(数组也是一种对象)不是的，它是数据放在堆内存里面，栈里面放置的是堆内存的内存地址

let obj = {
    name:'123',
    value:'12312'
}

name	value
obj	数据存放的堆内存的内存地址

当我们父子组件进行传值的时候。我们Props的原理其实是：

name	value
obj(父组件)	数据存放的堆内存的内存地址A(A：代表堆内存的内存地址)
数据存放的堆内存的内存地址A(A：代表堆内存的内存地址)

我们会发现，其实我们在传值的时候，不过是吧，栈内存复制的那一行，复制了一遍，包括里面value值

这个时候，我们在子组件中修改的时候，其实就是改变父子组件共同引用的那个堆内存中的值，所以也会改变父组件中的数据的值

为什么基本数据类型就不会了？

因为基本数据类型，Prop的时候，栈内存里面是直接复制的。

name	value
nameTest（父组件）	123
nameTest（子组件）	123

所以，你改变子组件的值的时候，不会改变父组件的值

怎么解决prop的浅拷贝

可以通过

JSON.Parse(JSON.String(父组件传递的值))

来解决

原理就是，将父组件中的堆内存中的数据，改成字符串，之后，再将字符串变成引用类型的值，放到堆内存里面去。这个时候，父子组件堆内存中的值虽然是一样的，但是栈内存中的value却不一样