1. What is the difference between the Composition Api used by Vue3.0 and the Options Api used by Vue2.x?
Composition API can be said to be the biggest feature of Vue3, so why is Composition Api launched and what problems are solved? Generally , projects developed using Vue2
generally have the following problems: 1. The readability of the code becomes worse as the component becomes larger. 2.
Every
code reuse method has disadvantages.
3. TypeScript support is limited.
例：
export default {
data(){
return{};
},
methods:{},
comouted:{},
watch:{}
}
You can see how the Options code is written. If it is a component state, it is written on the data attribute. If it is a method, it is written on the methods attribute... Using component
options (data, computed, methods, watch) to organize logic is effective in most cases.
However, when the component becomes complex, the list of corresponding attributes will also grow, which may make the component difficult to read and understand.
2. Composition Api
In the Vue3 Composition API, components are organized according to logical functions. All APIs defined by a function will be put together (more high cohesion, low coupling). Even if the project is large and has many functions, we can quickly locate all the APIs used by this function.
3.
Comparison
Summary
In terms of logic organization and logic reuse, Composition API is better than Options API
because Composition API is almost a function and has better type inference.
Composition API is friendly to tree-shaking, and the code is easier to compress.
Composition API does not see the use of this, which reduces the situation where this points to unclear.
If it is a small component, you can continue to use the Options API, which is also very friendly.