关于vue props 传值，子组件修改props数据，父组件数据随之改变的问题

1.最近完成一个table列表，控制cloumn的显示隐藏的功能时，发现一个问题，记录一下

首先问题是：

通过父组件传递一个array数据下去给到子组件,数据格式大概是这个样子

// 列信息
      columns: [
        { key: 0, label: `付款时间`, visible: true },
        { key: 1, label: `订单号`, visible: true },
        { key: 2, label: `消费商家`, visible: true },
       	...
      ],

子组件修改这个数据后，父组件列表的column列字段，相应显示隐藏
但是当时脑子一愣，没有发现子组件触发父组件方法去进行更改数据，所以就去研究了一下问题，然后就发现了一个之前没有关注到的问题！！！ 我真的会谢，太菜了

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

这种情况出现的原因是什么呢？

1.首先要知道Javascript 的数据类型
值类型（基本类型）：字符串（String） 数字（Number） 布尔（Boolean） 空（Null） 未定义（Undefined ）Symbol
引用数据类型：对象（Object） 数组（Array） 函数（Function)
2.内存空间
要理解Javascript在运行过程中数据是如何存储的，就先搞清楚其存储空间的种类
在Javascript执行过程中，主要有三种类型内存空间，分别是代码空间、栈空间、堆空间，
其中：

代码空间的主要存储可执行代码，
栈空间就是调用栈，用来存储执行上下文，
堆空间是用来存储引用数据类型的

大概意思是：js执行时，会把基本类型保存在栈空间，引用数据类型保存在堆空间;
var name='李四';
var age=22;
var childrenDada={
	name:'李四'，
	age:22
};
var newchildrenData=childrenData;

示意图：

从上图可以看到，对象类型数据是存放在堆空间中的，栈空间只是保存了对象的引用地址，当JavaScipt需要访问该数据时，是通过栈中的引用地址来访问的，所以，父组件传递给子组件，实际是一个引用地址，当子组件修改这个对象时，是修改了堆空间保存的数据，当然父组件也会改变，但是引用地址没有改变所以没有报错。