Vue bidirectional data binding principle

Using “data hijacking” combined with the publicer-subscriber pattern, the setter and getter of Object.definedProperty() is used to hijack each property of data, notifies the subscriber when the data changes, and triggers the corresponding listening callback.

How does Vue listen for array changes

Using the method of function hijacking, the method of rewriting the array Vue will be in the data array, the prototype chain rewriting. Points to a self-defined array prototype method that notifies dependencies of updates when the array API is called. If the array contains a reference type. The reference types in the array are monitored again

Vuex

Vuex is the state management mode of Vue. It is like a shared warehouse, which can be accessed by other pages.

There are five attributes in Vuex:

State: stores data. The component uses store.state. To get data.

Getters: Get data, equivalent to state computed attributes (computed), through this.$store.getters. To obtain.

Mutations: The only way to change the store state, sync function, this. codestore.mit (method name, value).

Actions: submit the modified data on Mutations, and operate asynchronously.

Module: Split state into modules for easy management

Axios interceptor

  • Request interceptor: Equivalent to a request detection mechanism, only the request that passes this detection can be sent.

  • Response interceptor: Equivalent to a response detection mechanism, only the response that passes this detection can be returned.

// Request the interceptor through AXIos
axios.interceptors.request.use(config= >{
// Add the token authentication Authorization field for the request header object
config.headers.Authorization = window. SessionStorage. The getItem (" token ")return config
})
Copy the code

Js data type Determines the reference data type

Basic data types: Number, String, Boolean, Null, Undefined, Symbol(ES6 new), BigInt(ES11 new);

Reference data types: Function, Array, Object, Date, RegExp.

Basic data types are in the stack, reference data types are in the heap, and their Pointers are in the stack.

Determine the basic data type: Typeof

Judge Array: array.isarray ()

Determine the reference data type:

  • Instanceof (left side must be object)

The instanceof operator is used to check whether the constructor’s prototype property appears on the prototype chain of an instance object

  • Object.prototype.toString.call()

inheritance

  • Borrow constructors: Use call() or apply() in subclass constructors

  • Stereotype chain inheritance: an instance of a parent class is the stereotype of a subclass

  • Combinatorial inheritance: Combines the advantages of the first two

  • Primitive inheritance: Assign the object to the prototype of the empty object constructor using the empty object as the middle (shallow copy)

  • Parasitic inheritance: Use primitive inheritance to make a shallow copy of a target object, enhancing the capability of the shallow copy

  • Parasitic combinatorial inheritance: inheritance is implemented using a combination of borrowed constructors passing parameters and parasitic patterns

Anti-shake and throttling

Image stabilization

If the task is frequently triggered, the task is executed only when the task triggering interval exceeds the specified interval.

 // The function of anti - shake function accepts parameters
    function debounce(fn) {
      // Create a flag to store the return value of the timer
      let timeout = null;
      return function() {
        // Every time the user clicks/type, the previous timer is cleared
        clearTimeout(timeout);
        // Then create a new setTimeout to ensure the interval after clicking the button
        // If the user still clicks, the fn function will not be executed
        timeout = setTimeout(() = > {
          fn.call(this.arguments);
        }, 1000);
      };
    }
Copy the code

The throttle

Only one task will be executed within the specified interval.

    function throttle(fn) {
      // Save a tag through a closure
      let canRun = true;
      return function() {
        // Check whether the flag is true at the beginning of the function, or break the function if it is not
        if(! canRun) {return;
        }
        // Set canRun to false to prevent it from being executed before it is executed
        canRun = false;
        / / timer
        setTimeout( () = > {
          fn.call(this.arguments);
          // After executing the event (such as calling the interface), reset the flag to true
          canRun = true;
        }, 1000);
      };
    }
Copy the code

Redraw and reflow

Redraw (repaint)

When the changes to the element style do not affect the layout, the browser will use redraw to update the element, which requires only re-pixelated rendering at the UI level with less loss.

Common redraw operations are:

  • Change the color of the element
  • Change the element background color

Reflux (reflow)

Also called layout. When an element’s size, structure, or trigger certain attributes, the browser rerenders the page, called backflow. In this case, the browser needs to recalculate, and after the calculation, the page layout needs to be rearranged, so it is a heavy operation.

Common backflow operations are:

  • Page first render
  • The browser window size changes
  • Element size/position/content changed
  • Element font size changes
  • Add or remove visible DOM elements

Redrawing does not necessarily trigger redrawing. The cost of redrawing is low and the cost of backflow is high.