What are react and vue? Is there any difference?
Everyone should be familiar with the second of the three major frameworks, and they have all been learned or used in development.
But what is the difference between them? This is what we need to discuss and learn in this article.
start!
MVC and MVVM
First, let’s explain the meaning of these letters
- M: Model Model
- V: View
- C: Controller Controller
- VM: ViewModel View Model
First of all, let’s talk about MVC. Everyone must also know the other one of the three major frameworks (anuglar).
If you have written angular, you will definitely be able to understand the meaning clearly. See the following code:
<input ng-model="" />
.contronller('BallController', ($scope) => {
const ball = {
basketball: 'I am Cai Xukun'
}
$ = ball
})
The input tag is easy to understand, it is the V (view) view in MVC.
As the name suggests, controller is the C (controller) controller in MVC.
ball is the M (model) model in MVC.
The concept of MVC is very simple, you need to show a basketball page.
Set up a basketball model to put it there and wait for use.
Write a view you need to show the basketball.
Use a controller to interact with the model and the view.
It seems that the concept of MVC is very comfortable and the framework is very standardized, but after the amount of code is too high, the entire project will appear to be bloated and not flexible at all.
The author was lucky enough to maintain a project called "Shishan", because after hundreds of (probably) demand iterations, each controller has more than 2,000 lines of code. Every time you fix a bug and write a new requirement, you need to maintain many aspects of things.
Then let’s learn about MVVM.
<input v-model="" />
let vm = new Vue({
data: {
ball: {
baskertball: 'Cai Xukun is me'
}
}
})
- M: Model Model
- V: View
- VM: ViewModel View Model
In fact, you can understand it by reading the code. vm is actually a vue object. Its function is to bind to the view. Whether the basketball in the Model is updated or other operations, it will notify and distribute to the view through the vm.
The benefits of doing this are, first of all, you don’t need to write a business logic many times. Similar to a shopcart function, you can directly introduce calls in many places if you encapsulate it into a component (ViewModel).
ps: the differences and common points between vue and React
The essential difference between the two
In essence, it is the MVVM framework, developed from MVC.
The essence is a front-end component-based framework, which is developed from the back-end component-based framework.
Differences in templates
Using templates-- (originally proposed by angular)
<div> <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> </div>
Using JSX templates has now become standardized and can be used independently.
<div>
{ok?<h1>Yes</h1>:<h1>No</h1>}
</div>
In terms of learning cost: JSX templates are simpler. You only need to know that {} is js syntax, and vue template v-if, v-else instructions need to be learned.
Considering from the perspective of template logic separation: JSX templates and JS logic are mixed together and not separated, which can easily cause confusion.
3. The difference between componentization
React itself is componentization, and without componentization, it is not React
vue also supports componentization, but is an extension on MVVM
4. What are the common points of both
All support componentization
All are data-driven views
Summarize
The above is the interview question introduced by the editor: analysis of the difference between react and vue. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!