Then the last in the advanced front end test questions (a) basic

Vue two-way binding implementation:

The vueObserver data listener passes an ordinary JavaScript object to the Vue instance’s data option. Vue iterates through all of the object’s properties. We use object.defineProperty () to convert all of these properties to setter and getter methods. Getter methods are called when a property in data is accessed, and setter methods are called when a property in data is changed.

react—-redux

The basic idea is to keep the state of the entire application in a single store. A store is just a simple javascript object, and the only way to change the state of your app is to trigger Actions in your app and then write reducers for those Actions to change the state. The entire state transformation is done in reducers and should not have any side effects.

In Redux, what is a store

Store is a javascript object that holds the state of the entire application. At the same time, the Store also undertakes the following responsibilities:

  • Allow access to state via getState()
  • A run changes state through dispatch(Action)
  • Register listeners by subscribe
  • Listeners are processed for cancellation by a function returned by subscribe(listener)

What is the action

Actions are pure javascript objects, and they must have a Type attribute indicating the type of action being executed. Essentially, the Action is the payload that sends data from the application to the Store.

What is a reducer

A Reducer is a pure function that takes the previous state and an action as arguments and returns the next state.

Redux Thunk is a middleware creators that allows you to write actions creators that return a function rather than an action. Thunk can be used to delay dispatch of an action if a certain condition is met, which can handle dispatch of an asynchronous action. A pure function is a function that does not depend on and does not change the state of variables outside its scope. This also means that a pure function always returns the same result for the same argument.

Vuex is based on Redux

  1. Global store
  2. responsive
  3. Cannot be changed directly, commit (mutation)

Vuex uses a single state tree to inject instances of Store into all child components, and mutation handles synchronous transactions

  1. Action: commit mutation, asynchronous
  2. module

Vue update data

  1. Asynchronous update
  2. Update data multiple times, only in the last render

The react of setState

State → life cycle processing → trigger render → Create virtual DOM → Generate fiberDom → diff → generate new task → Task fragmentation → renderCopy the code
  1. Two parameters.setState(updater,[callback]), the first parameter is the updated object, and the second parameter is the updated callback function;
  2. The setStat execution itself is synchronized with the code
  3. Synthetic events (onClick, onChanged, etc.) and setState in hook functions are asynchronous and merge multiple times into one update;
  4. This is synchronized in both native events and setTimeout.
  5. Shallow merger Objecr. Assign ()

React’s setState flow

  1. Put state in an array (queue);
  2. Check if it is in the update phase
  3. Yes: Components are placed in dirtyComponent
  4. No: Call update to mark the current update phase
  5. Finally, iterate through the dirtyComponent to perform the update

React vs. Vue

The same

  1. vitual dom
  2. componentization
  3. Props, single data stream

The difference between

  1. React is JSX and template; (JSX allows for more JS logic and manipulation)
  2. React State Management
  3. Object Properties (VUE)
  4. Vue: view — Bidirectional binding between medoL
  5. Vue: Communication between components (props, callback, emit)

routing

  1. It provides the history of the API (pushState, replaceState, popsState)
  2. HashRouter. Hash is not refreshed; window.location.pathname is refreshed
  3. The history (H5). Window.history. pushState does not refresh and changes the pathname