Object. DefineProperty method is used for bidirectional data binding in Vue 2.x, and Proxy Object is used for bidirectional data binding in Vue 3.x. Data hijacking can be realized through Proxy.

Object.defineProperty

Advantages:

  • It supports Internet Explorer 9, but Proxy has browser compatibility problems

Disadvantages:

  • Only properties of objects can be hijack, we need to traverse each property of each object.

  • Can’t directly to monitor array, by rewriting of the array that several methods (push, pop, unshift, shift, sort, reverse, splice) listen to implement the array.

  • ES6 Set and Map data structures cannot be listened on either.

  • It is also impossible to listen for additions and deletions, and reactive via vue.set () and vue.delete.

Proxy

  • The Proxy can listen directly on the entire object rather than on properties.

  • The Proxy can listen for changes to the array directly.

  • Proxy has 13 interception methods, such as ownKeys, deleteProperty, has, etc. Object. DefineProperty does not have.

  • Proxy returns a new Object, so we can just manipulate the new Object for our purposes, whereas Object.defineProperty can only be modified by iterating through Object attributes.

  • Proxy as the new standard will receive the browser manufacturers focus on continuous performance optimization, the new standard is rumored to be a performance bonus.