What are the differences between react and vue? What is mvvm and what is the difference principle of mvc ? What is a closure, how to use it, and why to use it? What is margin overlap problem and the solution ?

 What are the differences between react and vue? 

Similarities between react and vue

·  Both support server-side rendering

All  have Virtual DOM, component development, pass the parent and child component data through props parameters, and all implement the webComponent specification

·  Data Driven View

·  Have native support for the program, React's React native, Vue's weex

 

Differences between react and vue

 ·  React strictly only for the MVC view layer, Vue is the MVVM pattern

The  virtual DOM is different. Vue will track the dependencies of each component and does not need to re-render the entire component tree. For React, every time the state of the application is changed, all components will be re-rendered, so it will be required in React. shouldComponentUpdate is a life cycle function method to control

The  component writing method is different. The recommended method of React is JSX + inline style, which means that all HTML and CSS are written into JavaScript, that is,'all in js'; the recommended method of Vue is the single-file component format of webpack+vue-loader , That is, html, css, jd are written in the same file;

·  Data Binding: vue achieve a two-way data binding, react the data flow is one-way

The  state object is immutable in the react application, and the setState method needs to be used to update the state; in vue, the state object is not necessary, and the data is managed by the data attribute in the vue object

What is mvvm and what is the difference principle of mvc ?

一、MVC（Model-View-Controller）

MVC is a relatively intuitive architecture model, user operation -> View (responsible for receiving user input operations) -> Controller (business logic processing) -> Model (data persistence) -> View (feed back the results to View).

MVC is widely used, such as the SSH framework in JavaEE 

三、MVVM（Model-View-ViewModel）

If MVP is a further improvement of MVC, then MVVM is a complete change in thinking. It takes the idea of ​​"two-way binding of data model data" as the core, so there is no connection between View and Model, and interaction is through ViewModel, and the interaction between Model and ViewModel is two-way, so the change of view data will At the same time, the data source is modified, and the changes in the data source data will immediately reflect the view .

What is margin overlap problem and the solution ?

1. to overlap with the margin:

1 and picture margin-top margin-top 3 pictures overlap, the images 2 margin-bottom with 3 picture margin-bottom overlap. At this time, the margin value after the overlap is determined by the maximum value of the overlapped two pieces; if one of them has a negative value, the maximum positive margin minus the absolute maximum negative margin, if there is no maximum positive margin, it is determined by 0 minus the negative margin with the largest absolute value.

The method to solve the same direction overlap:

(1) add overflow: hidden; zoom:1 in the outermost div

(2) add padding:1px in the outermost layer; attribute

(3) add in the outermost layer: border:1px solid #cacbcc;

2. Different direction overlap problem:

The margin-bottom of 1 picture overlaps with the margin-top of 2 picture. At this time, the margin value after the overlap is determined by the maximum value of the overlapped two pictures.

Solve the problem of non-overlapping:

float:left (can only solve the problem of non-overlapping in the IE6 browser, and can solve the same overlapping problem under IE8 and above, chorme, firefox, and opera)

What is a closure, how to use it, and why to use it?

A package is a function that can read the internal variables of other functions. Since in the Javascript language, only the sub-functions inside the function can read the local variables, the closure can be simply understood as "a function defined inside a function".

So, in essence, a closure is a bridge that connects the inside of the function with the outside of the function. Closures can be used in many places. It has two biggest uses. One is to read the variables inside the function mentioned earlier, and the other is to keep the values of these variables in memory.

Points to note when using closures:

·  Because the closure will make the variables in the function be stored in the memory, the memory consumption is very large, so the closure should not be abused, otherwise it will cause performance problems of the web page, and may lead to memory leaks in IE. The solution is to delete all the unused local variables before exiting the function.

· The  closure will be outside the parent function and change the value of the variable inside the parent function. Therefore, if you use the parent function as an object, the closure as its public method, and the internal variable as its private value, you must be careful at this time. Feel free to change the value of the internal variable of the parent function.