Talk about Vue data hijacking

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

Hello, I’m Vike. Today we’re going to look at data hijacking in Vue2

Ps: This chapter leaves vuE2 alone on data hijacking

• What is data hijacking

  • Intercepts read and modify properties

    Simply put, any changes in the data should be able to be monitored, so that the corresponding operations can be done according to the changes in the data

• Why data hijacking

  • The data in Vue2 data is all responsive data. Once the data changes, the data on the page will be locally updated

    Without data hijacking, there is no way to update data without knowing its state

• Data hijacking in Vue2 uses the object.defineProperty method

  • Using object.defineProperty you can define a new property for an Object or modify the property and return it

• Object. DefineProperty Added attributes

  • Object.defineProperty(obj,prop,descriptor)
  • This method takes three parameters, obj is the object to operate on, Prop is the property to operate on, descriptor is the descriptor
  • Object Properties added

  Let obj = {" name ":" vike ", "age" : 5, "sex", "male"} / / to obj a new hobby properties, Let result = object.defineProperty (obj,'hobby',{value:['code','juejin']}) console.log(result,' new ')Copy the code

• Object attribute Modification

  / / object properties to modify the let obj = {" name ":" vike ", "age" : 5, "sex", "male"} / / the second parameter to modify the properties of the Let result = object.defineProperty (obj,'name',{value:'123'}) console.log(result)Copy the code

  

• Object.defineproperty implements data hijacking

  • Set a proxy for the source data, write object.defineProperty once for each property of the source Object,

    Let’s take name for example

  • The implementation of object.defineProperty data hijacking relies on two functions of the property

    • The getter function of the get() property accesses the property automatically
    • The setter function for the set(newValue) property is automatically called to modify the property. This method takes an argument, passing in this when the value is assigned
    • Default is undefined when there is no get or set

  / / implementation data hijacking / / the source data let obj = {" name ":" vike ", "age" : 5, Let p = {} object.defineProperty (p,'name',{// trigger get(){console.log(' someone read the property ') return object.name }, // set(newValue){console.log(' someone changed the property ')// here trigger vue2 page update logic obj.name = newValue// assign the newValue to the source data}}) Console. log(obj,' source data ')Copy the code

  

• Object. DefineProperty knowledge extension

  • Descriptor descriptors have two kinds of six kinds

    • Data descriptor

      • configurable

        The descriptor of a different property can be changed and deleted from the corresponding object only when the value of a different key is set to true. The default is false.

      • enumerable

        The property appears in the object’s enumeration property if and only if its Enumerable key value is true. The default is false

      • value

        The default value for this property is [undefined]

      • writable

        The value of the property, value above, can be changed by the assignment operator if and only if the writable key of the property is true. The default is false

    • Access descriptor

      • Called when get is valued
      • Set modifies the value

    • Browser Compatibility

      

    • In this section, we will continue to explore Vue3’s new approach to data hijacking

\