current position:Home>Change of data in Vue data

Change of data in Vue data

2021-08-23 00:15:46 Deer meow

Actually found in the development process , We print data When you read the data in the, you will find , He is not the usual format we see in the past , He is a proxy Formatted , Here's the picture :

  That is, no matter what type of data , They all have a layer of bread outside proxy Packaging ;

What is this for ?

Check information ——————————————

After this operation , The data can be restored to its normal type ,

JSON.parse(JSON.stringify(val))

About Proxy:

Proxy Can be interpreted as , Set up a layer in front of the target object " Intercept ", When the object is accessed by the outside world , We have to go through this level of interception , and Proxy It serves as a mechanism , Meaning similar to agency , It can filter and rewrite the object before it is accessed by the outside world .

If the vue2.0 Anyone who knows or has seen the source code knows ,vue2.0 Use in Object.defineProperty() Method through recursive + Traverse the way to achieve data monitoring ,

When we use the array method or change the index of the array, we can't re trigger Object.defineProperty Medium set() Methodical , So there's no real-time response . So use Object.defineProperty There are the following disadvantages :

1. Methods listening to arrays cannot trigger Object.defineProperty Methods set operation ( If you want to listen , You need to rewrite the array method ).
2. You have to traverse every attribute of every object , If objects are deeply nested , You need to use recursive calls .

  however vue2.0 Just use $set() Methods to solve the above problem ,Vue3.0 It has been upgraded , That's it Proxy.

Proxy Basic grammar

const obj = new Proxy(target, handler);

This corresponds to the screenshot above , What do you find ~, Another detailed diagram ;

The parameters are described as follows :

target:  Proxied object .
handler:  It's an object , Declared agent target Some operations of .
obj:  Is the object returned after the agent completes .

But every time the outside world says obj When operating , Will execute handler Some methods on objects .handler The object methods commonly used in are as follows :

1. get(target, propKey, receiver)
2. set(target, propKey, value, receiver)
3. has(target, propKey)
4. construct(target, args):
5. apply(target, object, args)

The following code demonstrates :

const target = {
  name: 'kongzhi'
};

const handler = {
  get: function(target, key) {
    console.log(`${key}  Read `);
    return target[key];
  },
  set: function(target, key, value) {
    console.log(`${key}  Set to  ${value}`);
    target[key] = value;
  }
};

const testObj = new Proxy(target, handler);

/*
   obtain testObj in name Property value 
   Automatically  get After the function   Print information :name  Read   And output the name  kongzhi
*/
console.log(testObj.name);

/*
  change target Medium name Property value 
  The printed information is as follows : name  Set to  111 
*/
testObj.name = 111;

console.log(target.name); //  Output  111

As shown in the above code : in other words target Is the represented object ,handler Is the agent target Of , that handler It has set and get Method , When you print every time target Medium name Property values are automatically executed handler in get Function method , When setting every time target.name When the attribute is valued , Automatically called handler Medium set Method , therefore target The property value corresponding to the object will change , At the same time testObj The object will also change . In the same way, after changing back testObj The properties in the object also change the original object target Property of , Because the object is of reference type , It's the same reference . If this is still hard to understand , You can simply look at the following code, which should be understandable :

const target = {
  name: 'kongzhi'
};

const testA = target;

testA.name = 'xxx';

console.log(testA.name); //  Print  xxx

console.log(target.name); //  Print  xxx

That's about it ,vue3.0 The upgrade , It can directly monitor the data change of array type
The target of listening is the object itself , No need to be like Object.defineProperty Go through each property the same way , There is a certain performance improvement .

copyright notice
author[Deer meow],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210823001543064v.html

Random recommended