Proxy realizes the principle of two-way binding of Vue3 data

1. Advantages of proxy vs. Object.defineProperty

Advantages of proxy:

• Proxy can monitor objects directly instead of properties;
• Proxy can directly monitor array changes;
• Proxy has up to 13 interception methods, not limited to apply, ownKeys, deleteProperty, has, etc., which are not available in Object.defineProperty;
• Proxy returns a new object. We can only operate on the new object to achieve our goal, while Object.defineProperty can only traverse the object properties and modify them directly.
• As a new standard, Proxy will be the focus of continuous performance optimization by browser manufacturers, which is the legendary performance bonus of the new standard;

Advantages of Object.defineProperty:

Good compatibility: Supports IE9, but Proxy has browser compatibility issues, and it cannot be smoothed out with polyfill, so the author of Vue stated that it is necessary to wait until the next major version (3.0) to rewrite it with Proxy.

2. Simple implementation of proxy monitoring object

1. Simple implementation of proxy object

```javascript
let data = {}; // Define an empty object let proxy = new Proxy(data, {}); // Create a Proxy and use data as the target object // Modify the name attribute of the Proxy proxy object proxy.name = 'shelley';
console.log(proxy); 
console.log(data)
// { name: 'shelley' }
// { name: 'shelley' }

```

2. Supplementary knowledge Reflect

Reflect object, like the Proxy object, is also a new API provided by ES6 for manipulating objects.

We need to return a Reflect.set(... arguments ) in handler.set() to assign it to the target object.

• The Reflect.set method sets the name property of the target object to be equal to value. If the name attribute is set to a function, the this of the function is bound to receiver.
• The Reflect.get method looks up and returns the name property of the target object. If there is no such property, it returns undefined.

3. Proxy method

The handler.set() method attributes set the catcher for the operation.

```javascript
let data = {
  name: 'shelley',
  age: '27'
};
let p = new Proxy(data, {
  set(target, prop, value) {
    // target = target object // prop = set property // value = modified value console.log(target, prop, value); // { name: 'shelley', age: '27' } age 18
    return Reflect.set(...arguments);
  }
})
p.age = 18;
console.log(data); // { name: 'shelley', age: 18 }
```

- handler.get() Capture of attribute read operations.

```javascript
let data = {
  name: 'shelley',
  age: 22
};
let p = new Proxy(data, {
  get(target, prop){
    console.log(target, prop); //{ name: 'shelley', age: 22 } age
    return Reflect.get(...arguments);
  }
})
console.log(p.age);//22
```

Simple implementation of Object.defineProperty monitoring object

```javascript
var o = {}; // Create a new object var bValue = 39; // Add an instance of the accessor descriptor property to the object Object.defineProperty(o, 'bValue', {  
  // This code will not set the properties of o, it will only get() when accessed {
    return bValue;
  },
  set(newValue) {
    console.log('set==>', newValue);
    bValue = newValue;
  }
});
console.log(o) // {}
// Enter the get method of the bValue property of the accessor proxy, return, and set the value of bValue in the o object to 38
console.log(o.bValue); // 38
// Enter the set method of the bValue property of the accessor proxy and set the new value of bValue.
// Enter get again and return, and set the value of bValue in the o object to 40
o.bValue = 40;
console.log(o.bValue) // 40
```

summary:

• Compared with es5 Object.defineProperty , es6 proxy is more powerful and provides many methods, and can even proxy methods.
• Why does Vue 3.0 use es6 proxy but not 2.0? Because es6 is not compatible with some browsers, such as low versions of IE, so it is only used when **most mainstream browsers are compatible**

3. Handwritten vue3.0 two-way binding-es6 Proxy

1. What is Proxy

• Proxy means "agent" in English. An agent is an intermediary that you use to obtain something or perform certain operations on it, rather than directly acting on the object.
• Proxy can be understood as setting up an interception layer in front of the target object. Any external access to the object must first pass through this interception layer, so a mechanism is provided to intercept or filter external access.

2. Use two-way binding in vue.js

```javascript
<div id="app">
  <h2>{{msg}}</h2>
  <input type="text" v-model="msg"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
  el: '#app',
  data: {
    msg: 'shelley'
},
})
</script>


```

Proxy vs. Object.defineProperty

Two-way binding in Vue 2.0, using Object.defineProperty() for two-way binding

shortcoming:

• It is not possible to monitor the array, but to rewrite the array methods (push, pop, shift, unshift, etc.). Perform two-way binding and data monitoring on this
• Poor efficiency, mainly because of a one-time recursive operation on multiple layers of data. If the data is large or deep, the performance will be very poor.
• Due to limitations, it is not possible to monitor newly added/deleted data, so $set is used in vue2.0 for manual addition.

- Object.definePorperty() recursively traverses all properties of all objects, which will affect performance when the data hierarchy is deep.

- Object.definePorperty() can only be used on objects, not on arrays.

- Object.definePorperty() can only monitor the properties during definition, not newly added properties.

- Since Object.definePorperty() cannot be used on arrays, vue2.0 chooses to monitor array data by rewriting the array method prototype, but it still cannot monitor changes in array indexes and lengths.

Two-way binding in Vue 3.0, using Proxy and Reflect for two-way binding

advantage:

• Proxy can intercept and monitor arrays and objects

shortcoming:

• Proxy will trigger multiple set/get responses

Solution:

• ① Use an operation similar to debounce to optimize it so that its value responds once
• ② (Solution in vue3.0) Determine whether key is the target's own attribute and whether value is equal to target[key], which can avoid redundant set/get operations

Proxy can only proxy one layer and cannot monitor deeply

• ① Use deep recursion to monitor each layer. Clever use of Reflect.get() will return the properties of the inner structure of the object (the next layer), determine whether the next layer is still an object, and use deep recursion operations. But it has a big impact on performance
• ②Use weakMap, use two weakMaps to save original data and responsive data. When accessing data, it will be searched from the saved data. If it is not found, a proxy operation will be performed on it.

This is the end of this article about the principle of proxy implementation of Vue3 data two-way binding. For more relevant content about proxy implementation of Vue3 data two-way binding, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!