Vue组件数据传递过程中数据丢失的原因及应对措施有哪些？

本文共计956个文字，预计阅读时间需要4分钟。

前言：在上篇文章中，我们介绍了JavaScript中的两种数据类型——基本类型和引用类型，以及引用类型中的浅拷贝与深拷贝。这里需要特别注意的，是该文中深拷贝引用类型值的实现方法，并指出这不是一个完整的介绍。

前言

在上一篇文章 JavaScript 中的两种数据类型中，分别介绍了基本类型和引用类型，以及引用类型的浅拷贝与深拷贝。这里需要注意的是，该文章中深拷贝引用类型值的方法，并不是完美的，引用类型值中的某些属性值，仍不能完整地复制到新的变量中。比如函数值，在深拷贝过程中，就会丢失。

问题

在实际项目中，假如使用了二次封装的组件，并且封装的组件内部做了一些属性值的深拷贝操作，就有极有可能因为传入的属性值是引用类型的值，导致丢失部分数据。

举例

以基于 el-table 封装的 ak-table 组件为例：

往 ak-table 组件中传入 row-key 属性，该属性可传入一个函数：Function(row)，具体见官方文档。

按理正常逻辑，传入 ak-table 的属性值应该原封不动地传入到 el-table 组件中，但是奇怪的事情在这里发生了，我们传入的函数在组件中消失了！

问题分析

首先传入 ak-table 的 row-key 属性的值，它是一个函数，即引用类型值，那么根据文章开头所说，如果对引用类型的值进行一般的深拷贝操作，是会丢失函数和数组等数据的。

在 ak-table 中，找到 row-key 属性，因为没有在 props 中定义，所以应该是保存在组件的 attrs 属性中。去到 mounted 方法，在此打印attrs属性中。