Difference between vue2.0 and vue3.0
1. The principle of two-way binding
Vue2 uses getter and setter operations of object properties to hijack the getter and setter operations, and issues notifications when data changes.
Vue3 uses ES6's new feature proxy to hijack data and issue notifications when the data changes.
Vue2 cannot detect exact array object changes.
vue3 can detect changes in the data inside the object/array, and more accurate notification of changes.
When vue2 is used to add a new property to the object, all watchers of this object will be rerun;
vue3 will only rerun the watcher that depends on that property
vue3 performs lazy observation by default
The vue2.0 data creates observers from the beginning, and when the data is large, problems will arise.
Optimized in vue3. Only when rendering data that initializes visible parts will the observer be created and it is more efficient.
2. Vue3 supports fragmentation (Fragments)
A vue instance was created directly in vue 2.0
A createApp is exported on demand in vue3.0 (what does ceateApp do)
There must be a root element in vue2.0, and vue3 can have multiple root nodes in the component.
API
Vue2 uses option type API (Options API)
Vue3 uses the Composition API,
The old option API splits different properties in the code: data, computed properties, methods, etc.
The new synthetic API is divided by methods, and the data and methods are defined in the setup and returned in a unified manner.
4. Lifecycle - priority of if and v-for
vue2v-for has higher priority than v-if (so we usually need to calculate attributes to process the data first to achieve performance optimization)
vue3v-if has higher priority than v-for
support
vue2 does not support typescript by default.
vue3 supports the use of typescript. When using typescript to build large projects, it can greatly improve the quality of project development.
Difference between vue and react
Common points
1. Virtual dom+diff algorithm
2. Provides responsive and componentized view components.
3. Keep your attention in the core library, and hand over other functions such as routing and global state management to the relevant libraries. (vue-router, vuex, react-router, redux, etc.)
4. Data-driven view (no frequent DOM operations required)
Differences
1. Frame
Vue is essentially an MVVM framework, developed from MVC;
React is a front-end componentization framework developed from back-end componentization.
2. Component writing differences
React recommends JSX + inline style, which means writing HTML and CSS into JavaScript, that is, all in js;
The recommended method of Vue is the template's single-file component format (simple and easy to understand, and it is easy to understand from the traditional front-end), that is, html, css, and JS are written in the same file (vue also supports JSX writing)
3. Responsive principle
Using data hijacking combined with publisher-subscriber mode, we hijack the setters and getters of each attribute through () to publish messages to the subscriber when the data changes, triggering the corresponding listening callback.
After React changes state, it will not actively change the rendered dom. It needs to be rendered through the setState() method. And the parent component passes the value of the child component. After the top-level pros is changed, all child components will be re-rendered, and it is necessary to use shouldComponentUpdate to optimize.
algorithm
Comparison nodes
vue When the node elements are the same, but the classname is different, it is considered to be elements of different types, delete and rebuild.
react When the node elements are the same, but the classname is different, it is considered to be the same type of node, and it only modifies the node attributes.
List comparison
The list comparison of vue adopts the method of comparing the two ends to the middle.
react uses the method of comparing from left to right.
5. Rendering process
Vue can calculate the differences in Virtual DOM faster because it tracks the dependencies of each component during rendering without re-rendering the entire component tree.
When React's application state is changed, all subcomponents will be re-rendered. The lifecycle method shouldComponentUpdate can be controlled, but Vue regards this as the default optimization.
Summarize
If you want a lightweight, faster, and more modern UI library to make single page applications, you should choose,
If it is a large-scale application and mobile application, you should choose React.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.