Vue advanced (unitary): data deep copy realized by parent-child component value transfer

No Silver Bullet 2020-11-13 07:29:04
vue advanced unitary data deep


Preface

In the use of vue When it comes to front-end development , Met in java Problems encountered in the development process of : Object reference , When put A The array is assigned to B After array ,B Array push One. new value, Lead to A There is one more in the array value, All of a sudden I think of object references , because java Met , It has been solved !

Problem analysis

When objects are passed between components , Because the reference type of this object points to an address ( Except for basic types and null, Assignment between objects , The same address will just point to , It's not a real copy ), as follows

Array :

var a = [1,2,3];
var b = a;
b.push(4); // b Added a 4
alert(a); // a Turned into [1,2,3,4]

object :

 var obj = {a:10};
var obj2 = obj;
obj2.a = 20; // obj2.a Changed the
alert(obj.a); // 20,obj Of a Follow the change

This is because the object type is assigned directly , Just point the reference to the same address , It led to the modification of obj It can lead to obj2 Also modified .

therefore , stay vue in , If multiple components refer to the same object as data , So when one of the components changes the object data , The data of other objects will also change synchronously . If there is a need for this two-way binding , So nature is the best , But if you don't need this binding and want the object data of each component to be independent of each other , It can be solved in the following ways

computed: {
data: function () {
var obj={};
obj=JSON.parse(JSON.stringify(this.templateData)); //this.templateData Is the object passed by the parent component
return obj
}
}

No end for learning

When it comes to deep copy and shallow copy , We have to talk about stacks 、 Basic data type and reference data type , Because these concepts are better for you to understand .

The basic data type contains :number,string,boolean,null,undefined Five category .

Reference data type (Object class ) Unordered objects that contain regular name value pairs {a:1}, Array [1,2,3], And functions, etc .

And these two kinds of data storage are respectively like this :

a. Basic types – Name value is stored in stack memory , for example let a=1;
 Insert picture description here

When you b=a Replication time , Stack memory will open up a new memory , Such as this :

 Insert picture description here

So when you change it a=2, Yes b No impact , Because the b Already on its own , The wings are hard. , Not subject to a The influence of the . Of course ,let a=1,b=a; although b Not subject to a influence , But it's not a deep copy , because Deep copy itself is only for more complex object Type data .

b. Reference data type – Name in stack memory , Value in heap memory , But stack memory provides a reference address to the value in heap memory , Let's draw a picture of the light copy example above :
 Insert picture description here

When b=a When copying , In fact, what we copy is a Reference address of , Not the value in the pile .

 Insert picture description here

And when we a[0]=1 When the array is modified , because a And b Point to the same address , So nature b It's also affected , This is what we call a shallow copy .
 Insert picture description here

If you also open a new memory in heap memory for b Storage value , Just like the basic type , How about a deep copy

 Insert picture description here

1. recursive

How can we implement deep copy , Here you can recursively copy all levels of attributes .

function deepClone(obj){
let objClone = Array.isArray(obj)?[]:{};
if(obj && typeof obj==="object"){
for(key in obj){
if(obj.hasOwnProperty(key)){
// Judge ojb Is the child element an object , If it is , Recursive replication
if(obj[key]&&typeof obj[key] ==="object"){
objClone[key] = deepClone(obj[key]);
}else{
// If not , Simple replication
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
let a=[1,2,3,4],
b=deepClone(a);
a[0]=2;
console.log(a,b);

Let's take a look at array manipulation slice() And concat() Application

let a=[1,2,3,4],
b=a.slice();
a[0]=2;
console.log(a,b);

 Insert picture description here
From the output of the console above , Does that mean slice The method is also a deep copy , After all b Nor was it affected. a Influence , It says , Deep copy copies all levels of attributes , Based on this example , Let's put a Change :

let a=[0,1,[2,3],4],
b=a.slice();
a[0]=1;
a[2][0]=1;
console.log(a,b);

 Insert picture description here
From the results , Array copy is not complete ,b The first level properties of the object are not affected , But the second level attributes were not copied successfully , Still can't get away a The control of , explain slice It's not really a deep copy at all .
The attributes of the first layer are indeed in deep copy , With independent memory , But deeper properties still share addresses , That's why it's causing these problems .

Empathy ,concat Methods and slice This is also the case , They're not really deep copies , Here we need to pay attention to .

2.parse and stringify

In addition to recursion , We can also borrow the amount mentioned above JSON object parse and stringify Method

function deepClone(obj){
let _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);
return objClone
}
let a=[0,1,[2,3],4],
b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

 Insert picture description here
You can see , this time b It's totally unacceptable a The influence of the .

Incidentally ,JSON.stringify And JSON.parse In addition to implementing deep copy , Can combine localStorage Implement object array storage .

3. extend

In addition to the above two methods , We can also borrow JQ Of extend Method .

$.extend( [deep ], target, object1 [, objectN ] )

deep Indicates whether there is a deep copy , by true Is a deep copy , by false, Is a shallow copy

target Object type Target audience , Member properties of other objects will be attached to the object .

object1 objectN Optional . Object type The first one and the first one N Two merged objects .

let a=[0,1,[2,3],4],
b=$.extend(true,[],a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

 Insert picture description here
You can see , The effect is the same as the above method , Just need to rely on JQ library .

In the actual development process , For example, a pile of data is returned in the background , You need to operate on this pile of data , But in the case of multi person development , You don't know if the data is being used by other functions , Direct modification may cause hidden problems , Deep copy can help you operate data more safely and safely , Use deep copy according to the actual situation .

Reference documents

Vue API

版权声明
本文为[No Silver Bullet]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple