It has been more than half a year since VUE3.0 was released, and the major front-end frameworks are constantly iterating and updating in the footsteps of new versions. Although currently VUE3.0 is backward compatible with existing 2.x projects, the appearance of new features such as composition-API and the way of passing parameters between parents and descendants has greatly improved the organization ability of our code. The ability to control the overall state also has higher requirements, we “cut to the son” should also take action, can not be eliminated by the current of The Times.

It all starts with bidirectional binding

In retrospect, two-way binding was probably the most amazing feature of Vue when we jquery developers first started working with it. Js finally no longer difficult to spell template strings. It is well known that the implementation of reactive data in Vue2. X relies on the JS Object.defineProperty Api, so let’s take a look at the simplest example.

Object.defineProperty

const obj = {}; Object.defineproperty (obj, 'text', {get: function() {console.log(' read value '); }, set: function(newVal) {console.log(' set value :' + newVal); document.getElementById('input').value = newVal; document.getElementById('span').innerHTML = newVal; }}); Const input = document.getelementById ('input'); // Const input = document.getelementById ('input'); input.addEventListener('keyup', function(e){ obj.text = e.target.value; })Copy the code

Vue implements our bidirectional binding by traversing the data at instance initialization.

Object.defineproperty has the following disadvantages

  • Unable to listen natively for array changes, requires special handling
  • Every property of an Object must be traversed (when initialized, Object.definePropety is traversed from the root node of data to the last node)
  • New deletions that cannot listen to attributes can only hijack current object attributes,
  • If you want to hijack deeply, you must traverse the nested objects deeply

Proxy

Object. DefineProperty (which is still used for compatibility under IE) was deprecated in Vue3.0 for responsive data and replaced with Proxy, which puts an “interceptor” in front of the target Object. There’s a lot of literature on proxies, but what we really need to know in Vue is that a Proxy is an object that contains another object or function and allows you to intercept it, Object.defineproperty has the following advantages over 2.x

  • You can listen directly on objects instead of properties
  • You can listen for changes in the array directly
  • Performance improvements

Let proxy = new Proxy(target, handler) Target — Is an object to wrap, which can be anything, including functions. Handler — Agent configuration: Objects with “traps” (methods for intercepting operations). For example, the get hook reads the target property, the set hook writes the target property, etc. When handler is empty, the proxy is a transparent wrapper for target.)

Let arr = [1,2] let arrProxy = new Proxy(arr, {// propKey for arrays is subscript, For objects this is the key name get(target, propKey) {console.log(' reads ${propKey}! ')}, set(target, propKey, value) {console.log(' set ${propKey}! ArrProxy [0] = 'change' // set item 0! // Read arrProxy[1] // read item 1!Copy the code

Note: 2.X Vue Devtools is not compatible with VUe3.0, you need to install the latest version, please check.

This is just one of the most basic features of Proxy, so you don’t have to rewrite array methods like push and unshift to add elements (2.X). You can add checks to them because internally they use the [[Set]] operation that the proxy intercepts, and there are more features and capabilities that we will cover in future studies and articles.