Скачать или смотреть Resolving Vue2 Variable Unexpected Behaviour: The Power of Deep Cloning

Discover how to handle variable reference issues in Vue2 applications, ensuring that original data remains intact when modifying loaded data.
---
This video is based on the question https://stackoverflow.com/q/66620062/ asked by the user 'Second2None' ( https://stackoverflow.com/u/9645594/ ) and on the answer https://stackoverflow.com/a/66620130/ provided by the user 'FrankPl' ( https://stackoverflow.com/u/15243681/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Vue2 Variable unexpected behaviour

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Resolving Vue2 Variable Unexpected Behaviour: The Power of Deep Cloning

In the world of JavaScript frameworks, Vue2 stands out for its simplicity and flexibility. However, many developers encounter an unexpected behaviour when working with variables, particularly when trying to maintain a backup of data retrieved from API calls. If you’re dealing with Vue2 and facing issues related to variable references, you're not alone. This guide will break down the common problem of variable handling and provide you with a clear, effective solution.

The Problem

You are trying to create a backup of a variable, specifically when dealing with data pulled in from an Axios call. Your goal is to have two variables:

loaded_data: This holds the dynamic data retrieved from your API.

original_data: This is intended to preserve the original state of loaded_data so you can reset back to it when necessary.

However, when you perform the assignment:

[[See Video to Reveal this Text or Code Snippet]]

Instead of getting a duplicate of the data, you are unintentionally sharing references between loaded_data and original_data. This means any updates to loaded_data will also affect original_data.

You noticed this when observing the console logs:

[[See Video to Reveal this Text or Code Snippet]]

This is not the desired behaviour as the original data should remain unchanged.

The Solution

The solution to this issue rests upon the concept of deep cloning. Instead of simply copying the object reference, you need to create a completely new object that has the same properties and values. Here’s how you can do that effectively in Vue2:

Steps to Create a Deep Clone

Use JSON Methods: The most straightforward way to create a deep clone in JavaScript is by using JSON.parse() and JSON.stringify(). This method will serialize your object into a JSON string and then parse it back into a new object.

Here’s how you can implement it:

[[See Video to Reveal this Text or Code Snippet]]

Code Implementation

Your code to handle the response would look something like this:

[[See Video to Reveal this Text or Code Snippet]]

Reset Data Function

Now, when you implement your reset function, original_data will remain unchanged even when you modify loaded_data:

[[See Video to Reveal this Text or Code Snippet]]

Now, when you modify loaded_data, the original_data will still retain its initial state:

[[See Video to Reveal this Text or Code Snippet]]

Final Console Output

After calling the reset_data() method, your console should now correctly display:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By employing deep cloning techniques, you can effectively manage the unexpected behaviour of variables in Vue2, ensuring that your application functions as intended. This method not only enhances your coding practices but also safeguards your data integrity when managing variable states.

Now you can confidently implement this solution in your Vue2 applications, avoiding potential pitfalls when dealing with object references.

Keep experimenting and happy coding!