As we all know, uvu made a change in the responsivity of Vue3.0, from Object. DefineProperty 2.0 to Proxy now. Why was it changed from Object.defineProperty to Proxy? Answer: Proxy is definitely better! What’s better than Object.defineProperty? Next, let’s look at ~

The following is my study and understanding, if there are deficiencies, please point out! Thank you for reading ~

Vue2.0DefineProperty in defineProperty:

// let person = {name: 'age ', age: DefineProperty (p,'name',{} Object attribute :true, works without any additional information. // Read call get(){return person.name}, // modify call set(value){console.log(' changed name! ') person.name = value } })Copy the code

Let’s look at the output from the console again.

You can see:

When we modify name, we fire set().

When we read the property, we actually go get() and it’s not printed out here.

In defineProperty, whenever we want to delete any property using delete, we need to configure the 64X property, which is true and deletes the specified property. This state can only be defined once and cannot be changed thereafter.

This is the responsive core of Vue2.0:

Object type: Object.defineProperty() Intercepts reading and modifying attributes (data hijacking)

Array type: Intercepts by overriding a series of methods that update an array, (wrapping array change methods)

Object.defineProperty(data, 'count',{
	get() {},
	set() {}
})
Copy the code

Existing problems:

  • Add attribute, delete attribute, interface will not update.
  • Modify the array directly by subscript, the interface does not automatically update

In VUE, a listener Observer is implemented that hijacks and listens to all attributes and notifies subscribers if any changes are made. In vUE, this problem is avoided by defining obJ objects to record objects that have setter and getter methods set. In vUE, obJ objects are defined to record objects that have setter and getter methods set. But if you want to extend an object, you must manually set setters and getters for new properties, which is why properties that are not pre-declared in data cannot be bidirectively bound and need to be set via this.$set().

Can I detect array subscript changes for Object.defineProperty?

The answer is yes.

We hijacked seven common array operations: push(), pop(), Shift (), unshift(), splice(), sort(), reverse(). Vue.set() handles arrays by calling the splice method…

Proxy

The emergence of Proxy, to vUE response has brought great convenience, such as can directly hijack the array, object change, can directly add object attributes, but compatibility may have some problems…

Without further ado, let’s cut to the chaseVue3.0Is how to achieve responsive through Proxy!

// let person = {name: 'age ', age: Reflectduix1 const p = new Proxy(person,{get(target,prpoName){Reflectduix1 const p = new Proxy(person,{get(target,prpoName){ Person return reflect. get(target,prpoName)}, // Set (target,prpoName,value){console.log(' someone changed ${prpoName} on P. Person reflect. set(target,prpoName,value)}, deleteProperty(target, PrpoName) {console.log(' Someone changed ${prpoName} on P, Person return reflect.deleteProperty (target,prpoName)}})Copy the code

We can clearly see that we use three functions: set(), get(), and deleteProperty(), and we call set() when we add and modify elements.

In the responsivity of Vue3.0, not only Proxy is used, but also Reflect, which is a reflection object.

My personal feeling is that reflecting has a big advantage. The main effect is that you don’t have to do a try catch any more (in this case, you wrap the frame directly). However, there is also a drawback to the feeling that you don’t have to even point out an error.

let obj = {a: 1, b: 2} const d1 = Reflect.defineProperty(obj, 'c', { get() { return 3 } }) const d2 = Reflect.defineProperty(obj, 'c', {get() {return 4}}) if (d2) {console.log(' operation succeeded ')} else {console.log(' operation failed ') console.log(obj)} // Tests whether to continue console.log('well')Copy the code

We’re here to talkdefinePropertyandProxySome differences between:

1. Proxy can observe more types than defineProperty

2, Proxy is not compatible with IE, there is no polyfill, defineProperty can support IE9

Object. DefineProperty is the attribute of the hijacked Object. New elements need to be defineProperty again. Proxy hijacks the entire object, and no special processing is required

4. With defineProperty, we modify the original OBJ object to trigger interception, whereas with proxy, we have to modify the proxy object, i.e. the instance of proxy

5. When a new attribute is defined on an Object, Proxy can listen for it but Object.defineProperty cannot

6. When an array is added or deleted, Proxy can detect it, but Object.defineProperty cannot.

Of course, Proxy has up to 13 interception methods, not limited to apply, ownKeys, deleteProperty, has, etc. Object. DefineProperty does not have. If you want to know more, you can go to Proxy and Reflect

  • Get (target, propKey, receiver) : Intercepts reading of object properties, such as proxy.foo and proxy[‘foo’].

  • Set (target, propKey, value, receiver) : Intercepts the setting of object properties, such as proxy.foo = v or proxy[‘foo’] = v, and returns a Boolean value.

  • Has (target, propKey) : Intercepts the propKey in proxy operation and returns a Boolean value.

  • DeleteProperty (target, propKey) : Intercepts the operation of delete Proxy [propKey] and returns a Boolean value.

  • OwnKeys (target) : interception Object. GetOwnPropertyNames (proxy), Object. GetOwnPropertySymbols (proxy), the Object. The keys (proxy), for… The in loop returns an array. This method returns the property names of all of the target Object’s own properties, whereas object.keys () returns only the traversable properties of the target Object itself.

  • GetOwnPropertyDescriptor (target, propKey) : interception Object. GetOwnPropertyDescriptor (proxy, propKey), returns the attributes describe objects.

  • DefineProperty (target, propKey propDesc) : Intercepts Object.defineProperty(proxy, propKey, propDesc), Object.defineProperties(proxy, propDescs), and returns a Boolean value.

  • PreventExtensions (target) : Intercepts Object.preventExtensions(proxy), returns a Boolean.

  • GetPrototypeOf (target) : Intercepts object.getProtoTypeof (proxy) and returns an Object.

  • IsExtensible (Target) : Intercepts Object. IsExtensible (proxy), returning a Boolean value.

  • SetPrototypeOf (target, proto) : Intercepts Object.setPrototypeOf(proxy, proto) and returns a Boolean value. If the target object is a function, there are two additional operations that can be intercepted.

  • Apply (target, object, args) : intercepts operations called by Proxy instances as functions, such as Proxy (… The args), proxy. Call (object,… The args), proxy. Apply (…). .

  • Construct (target, args) : intercepts operations called by Proxy instances as constructors, such as new Proxy (… The args).

Put a picture of Proxy support in the browser

As you can see, Proxy doesn’t love Internet Explorer at all…

Refer to the article: blog.csdn.net/yuqing1008/…