Vue组件传值过程中数据丢失的原因及解决方案有哪些？

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

前言：在上一篇文章中，我们介绍了JavaScript中的两种数据类型：基本类型和引用类型。本文将分别介绍这两种类型，以及引用类型中的浅拷贝与深拷贝。

在JavaScript中，基本类型包括字符串（String）、数字（Number）、布尔值（Boolean）、undefined、null和Symbol。而引用类型则包括对象（Object）和数组（Array）。

基本类型是按值存储的，也就是说，每个变量都有自己的存储空间。当我们复制一个基本类型的变量时，实际上是复制了其值，因此改变一个变量的值不会影响到另一个变量。

javascriptlet num1=10;let num2=num1;num1=20;console.log(num2); // 输出：10

引用类型是按引用存储的，也就是说，变量实际上存储的是指向对象的内存地址。当我们复制一个引用类型的变量时，实际上是复制了引用，因此改变一个变量的值会影响到另一个变量。

javascriptlet obj1={name: '张三'};let obj2=obj1;obj1.name='李四';console.log(obj2.name); // 输出：李四

引用类型中，浅拷贝和深拷贝是两种常见的拷贝方式。

浅拷贝是指创建一个新对象，然后复制原始对象中的所有属性到新对象中。如果原始对象中包含引用类型的属性，那么新对象和原始对象会共享这个引用。

javascriptlet obj1={name: '张三', age: 20, info: {job: '程序员'}};let obj2={...obj1};obj1.info.job='工程师';console.log(obj2); // 输出：{name: '张三', age: 20, info: {job: '工程师'}}

深拷贝是指创建一个新对象，然后递归复制原始对象中的所有属性到新对象中。如果原始对象中包含引用类型的属性，那么新对象会复制这个引用类型的属性，而不是共享。

javascriptlet obj1={name: '张三', age: 20, info: {job: '程序员'}};let obj2=JSON.parse(JSON.stringify(obj1));obj1.info.job='工程师';console.log(obj2); // 输出：{name: '张三', age: 20, info: {job: '程序员'}}

需要注意的是，深拷贝在处理循环引用、函数等复杂对象时可能会遇到问题。在实际开发中，我们可以根据需要选择合适的拷贝方式。

前言

在上一篇文章 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属性中。去到mounted方法，在此打印attrs 的值，看看拷贝前后的数据对比。

控制台输出

———————————————————————————————————————

问题到这里就很清晰了，首先，ak-table 组件内部其实是想对传进来的属性值做初始化操作，然后就对 $attrs 进行了深拷贝操作，拷贝之后就丢失了 row-key 属性值，所以造成了数据丢失。

解决方案

对于传入引用类型的值，直接通过子组件的 props 属性接收来自父组件的值，然后不对传进来的值做处理，直接使用。

对于传入引用类型的值，在拷贝时要‘特殊对待'，把需要用到的属性值递归拷贝到新的变量中。

总结

对于 JavaScript 中的基本类型和引用类型，以及对引用类型值拷贝的理解，是我们运用这门语言进行开发的基本技能。有时候常常因为粗心大意，以为简单粗暴的拷贝一个变量，就以为得到了它的完全复制体，因而造成了某些数据‘消失不见'的灵异事件。这时可以参考文章的解决方案，这是我在项目开发中遇到过的问题，以此记录，希望对您有帮助。

到此这篇关于Vue组件传值过程中丢失数据的分析与解决方案的文章就介绍到这了,更多相关Vue组件传值丢失数据内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！

参考链接：JavaScript深拷贝的一些坑