Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to achieve two-way data binding in proxy". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Write at the front

As there is more and more news about vue3.x, so does the discussion of proxy. What is the difference between proxy and Object.defineProperty, what are its advantages, and where can it be applied?

2.Object.defineProperty

Before we talk about proxy, let's review Object.defineProperty. As we all know, vue2.x and previous versions use Object.defineProperty to achieve two-way binding of data, but how is it bound? Let's simply implement it.

Function observer (obj) {

If (typeof obj = = 'object') {

For (let key in obj) {

DefineReactive (obj, key, obj [key])

}

}

}

Function defineReactive (obj, key, value) {

/ / Recursive detection for value is an object

Observer (value)

/ / hijack the key of the object

Object.defineProperty (obj, key, {

Get () {

Console.log ('get:' + key)

Return value

}

Set (val) {

/ / the val set is an object

Observer (val)

Console.log (key+ "- data has changed")

Value = val

}

})

}

Let obj= {

Name:' waiting'

Flag: {

Book: {

Name:'js'

Page:325

}

Interest: ['hot pot', 'travel']

}

}

Observer (obj)

Execute it in the console of the browser, and it seems to work properly.

But in fact, there are several problems with Object.defineProperty

Question 1. Deleting or adding object properties cannot be monitored

For example, add an attribute gender, which cannot be listened to because there is no such attribute when executing observer (obj). Deleted attributes are also unaudible

When adding attributes, vue needs to use $set for operation, and the interior of $set also uses Object.defineProperty for operation.

Question 2. Changes in the array cannot be monitored

As you can see from the figure above, although the array properties are actually modified successfully, they cannot be monitored.

Question 3. Because the object is traversed recursively and the properties of the object are hijacked by Object.defineProperty, if the level of the object traversing is deep, it takes a long time, and there are even performance problems.

3.proxy

For proxy, the description on mdn is: objects are used to define custom behaviors for basic operations (such as property lookups, assignments, enumerations, function calls, etc.)

To put it simply, you can set a layer of interception on the target object. No matter what you do to the target object, you have to go through this layer of interception.

It sounds like proxy is easier to use than Object.defineProperty and much simpler, but in fact it is. Let's try to rewrite the above code with proxy

Function observerProxy (obj) {

Let handler = {

Get (target, key, receiver) {

/ / if it is an object, add proxy interception recursively

If (typeof target [key] = = 'object' & & target [key]! = = null) {

Return new Proxy (target [key], handler)

}

Return Reflect.get (target, key, receiver)

}

Set (target, key, value, receiver) {

Console.log (key+ "- data has changed")

Return Reflect.set (target, key, value, receiver)

}

}

Return new Proxy (obj, handler)

} let obj= {

Flag: {

Book: {

Name:'js'

Page:325

}

Interest: ['hot pot', 'travel']

}

}

Let objTest=observerProxy (obj)

The same effect.

Moreover, it can do things that Object.defineProperty can't do, such as adding an attribute gender, which can be monitored.

Operand array, which can also be monitored

Finally, knock on the blackboard and briefly summarize the difference between the two.

1.Object.defineProperty intercepts the properties of the object and changes the original object. Proxy intercepts the entire object and generates a new object through new without changing the original object.

There are 11 ways to intercept 2.proxy, in addition to get and set above. There are many ways to choose Proxy, and you can also listen to some operations that cannot be monitored by Object.defineProperty, such as listening to arrays, adding and deleting properties of listening objects, and so on.

4.proxy usage scenario

With regard to the usage scenarios of proxy, due to the limitation of space, here are a few simple examples, more can be moved to my github notes or mdn.

See here, the difference between the two, and the advantages of proxy already know roughly. But in terms of development, what scenarios can you use proxy? here's a list of situations that you might encounter.

4-1. Negative indexed array

When using API such as splice (- 1), slice (- 1), etc., when entering a negative number, it will navigate to the last item of the array, but on a normal array, negative numbers cannot be used. [1BZ] [- 1] this code does not output 3. To get the above code to output 3, you can also use the proxy implementation.

Let ecArrayProxy = {

Get (target, key, receiver) {

Let _ index=key

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.