This is the second day of my participation in the August More text Challenge. For details, see:August is more challenging

Preface:

  • Last time we talked about defineProperty and today we’re going to talk about proxy

  • Data hijacking in VUE3 uses proxy mainly because defineProperty has several disadvantages

    • Add attributes, delete attributes
    • Modify the array directly by subscript

  • defineProperty

    Let person = {name:'vike', Let p = {} // name attribute object.defineProperty (p,'name',{get(){console.log(' read name attribute ')) return person.name }, Set (newValue){console.log(' modify name attribute ') person.name = newValue}}) // Age attribute object.defineProperty (p,'age',{get(){ Console. log(' read the age property ') return person.age}, set(newValue){console.log(' change the age property ') person.age = newValue}})Copy the code

  • The new attribute

    • Data cannot be responsive without data hijacking

  • Delete the properties

    • Use the delete keyword to delete the property, returning flase.

    • Delete Delete returns true or flase. True when deleted, false when not deleted

    • Add a new line of information :true to the object.defineProperty configuration to delete the information, signals, and information

    • Delete deleting the property on P does not affect the property on Person, mainly because the change cannot be captured

The proxy on

  • Window. Proxy is a built-in function

    • Using the instance
    Let person = {name:'vike', age:5} let person = {name:'vike', age:5}Copy the code

- Proxy Handler Adds, deletes, modifies, modifies, and queries properties using the following configuration. - Proxy Target attribute in Proxy - Value method p.name p.age - Added Modified Deletes ProxyCopy the code

Let person = {name:'vike', Age :5} let p = newProxy (person,{// get has two arguments: target is the object passed to newProxy, propName is the property read // The property read is triggered Get (target,propName){console.log(' read ${propName} attribute ') return target[propName]}, // Set (target,propName,newValue){console.log(' modified ${propName} ') target[propName] = newValue }, // deleteProperty(target,propName) {console.log(' delete ${propName} attribute ') delete target[propName]}}) ` ` `Copy the code

-delete p.name returns false because the deleteProperty method did not return, Just 'return delete target[propName]' ## Reflect introduced - ES6 added - ECMA is trying to port methods on Object to ReflectCopy the code

The -reflect method also contains defineProperty and returns true to indicate success. Let person = {name:'vike', Age :5} let p1 = reflect.defineProperty (person,'sex',{get() {return 'male'}}) let p2 = Reflect.defineproperty (person,'sex',{get() {return 'female'}}) console.log(p1,p2)Copy the code

Let person = {name:'vike', Age :5} object.defineProperty (person,'sex',{get() {return 'male'}}) object.defineProperty (person,'sex',{get() {return }})Copy the code

conclusion

  • In the case of Reflect and Object, framework encapsulation requires more robust Reflect
  • Proxy has advantages in processing responsive data
  • The shortcomings of Object. DefineProperty are also addressed by the VUE framework API