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) 未定义(UndefinedSymbol
引用数据类型:对象(Object) 数组(Array) 函数(Function)
2.内存空间
要理解Javascript在运行过程中数据是如何存储的,就先搞清楚其存储空间的种类
Javascript执行过程中,主要有三种类型内存空间,分别是代码空间栈空间堆空间
其中:

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

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

示意图:
在这里插入图片描述

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

Logo

前往低代码交流专区

更多推荐