vue组件监听传入数据变化,vue不相关组件传值
本文主要介绍Vue元件值传递过程中丢失数据的分析和解决方法。通过图文非常详细的介绍，对大家的学习或者工作都有一定的参考价值。下面让我们跟随边肖一起学习。
前言
上一篇文章中，分别介绍了JavaScript中的两种数据类型，基本类型和引用类型，以及引用类型的浅拷贝和深拷贝。这里需要注意的是，本文中深度复制引用类型值的方法并不完善，引用类型值中的一些属性值仍然不能完全复制到新的变量中。例如，函数的值将在深度复制过程中丢失。
问题
在实际项目中，如果使用二次封装的组件，并且在封装的组件内部做一些属性值的深度复制操作，很有可能会因为传入的属性值是引用类型而丢失一些数据。
举例
以基于el-table包的ak-table组件为例：
将row-key属性传递给ak-table组件，该组件可以传递一个函数：Function(row)。详见官方文件。
正常情况下，ak-table的属性值应该原封不动的传入el-table组件中，但是这里发生了奇怪的事情，我们传入的函数在组件中消失了！
问题分析
首先传入ak-table的row-key属性的值，这个值是一个函数，也就是引用类型值。按照文章开头的说法，如果对引用类型值进行一般的深度复制操作，函数、数组等数据都会丢失。
在ak-table中，找到row-key属性，因为它没有在props中定义，所以应该保存在组件的attrs属性中。转到mounted方法并在此打印attrs属性。转到挂载的方法，在这里打印attrs的值，看复制前后的数据对比。
控制台输出
———————————————————————————————————————
这里问题很明显。首先，ak-table组件实际上想要初始化传入的属性值，然后对$attrs进行深度复制。复制后，row-key属性的值会丢失，从而导致数据丢失。
解决方案
对于传入引用类型的值，通过子组件的props属性直接从父组件接收值，然后直接使用，不处理传入值。
对于传入引用类型的值，复制时要‘特殊处理’，需要使用的属性值要递归复制到新的变量中。
总结
了解JavaScript中的基本类型和引用类型，以及引用类型值的复制，是我们用这种语言开发的基本功。有时候因为不小心，我会认为简单粗暴的复制一个变量就是完整的复制，从而导致一些数据‘消失’的灵异。这时候可以参考文章的解决方法，这是我在项目开发中遇到的问题。希望对你有帮助。
关于Vue元件值传递过程中丢失数据的分析和解决方法的文章到此结束。有关Vue组件值传输中丢失数据的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
参考：JavaScript深度复制的一些坑
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。