Analysis and solution of data loss during Vue component value transfer

Preface

In the previous article Two data types in JavaScript, basic types and reference types were introduced, as well as shallow copies and deep copies of reference types. It should be noted here that the method of deep copying reference type values ​​in this article is not perfect, and some attribute values ​​in the reference type value cannot be completely copied to the new variable. For example, function values ​​will be lost during the deep copy process.

question

In actual projects, if a secondary encapsulated component is used and some deep copy operations of attribute values ​​are performed inside the encapsulated component, it is very likely that some data will be lost because the attribute value passed in is a reference type value.

Example

Take the ak-table component based on el-table encapsulation as an example:

Pass the row-key attribute to the ak-table component. This attribute can pass a function: Function(row). For details, see the official documentation.

According to normal logic, the attribute value passed into ak-table should be passed into the el-table component intact, but a strange thing happened here. The function we passed in disappeared in the component!

Problem Analysis

First, pass in the value of the row-key attribute of ak-table, which is a function, that is, a reference type value. Then, according to what was said at the beginning of the article, if a general deep copy operation is performed on a reference type value, data such as functions and arrays will be lost.

In ak-table, find the row-key attribute. Since it is not defined in props, it should be saved in the attrs attribute of the component. Go to the mounted method and print the attrs attribute. Go to the mounted method and print the value of attrs to see the data comparison before and after the copy.

Console Output

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

The problem is very clear here. First, the ak-table component actually wants to initialize the attribute value passed in, and then performs a deep copy operation on $attrs. After the copy, the row-key attribute value is lost, resulting in data loss.

Solution

For the value of the passed reference type, the child component directly receives the value from the parent component through the props attribute, and then does not process the passed value and uses it directly.

For the values ​​of reference type passed in, they should be treated specially when copied, and the attribute values ​​needed should be recursively copied to the new variable.

Summarize

Understanding the basic types and reference types in JavaScript, as well as copying reference type values, are basic skills for us to develop with this language. Sometimes, due to carelessness, people think that simply and roughly copying a variable means they have obtained a complete replica of it, which causes some data to 'disappear'. At this time, you can refer to the solution in the article. This is a problem I encountered in project development. I record it here and hope it will be helpful to you.

This concludes this article on the analysis and solution of data loss during Vue component value transfer. For more relevant content on Vue component value loss, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

Reference link: Some pitfalls of JavaScript deep copy