Oaks from little acorns grow, the last article, mainly about how to build source code reading environment, if there is not clear, you can go to see: “small white read source code – VUe3 (environment preparation)”.

In addition, after running the sample service, we can also see examples of VUe3, as shown below:

We can see in the examples that there are 4 file directories. The first one is for the test file, but I didn’t click on it. The next three are classic/composition/Transition. Transition should be related to the transition component. There are two files: transtion and transition. The classic file is similar to the previous vue2 file, except that some of the instantiation methods are changed to new –> createApp and so on; Setup () appears directly after creatApp in Composition. Nani, what is it? Go search it.

Here’s a bunch of links:

Vue Composition API

Vue3 Essentials Course

Why a Composition Api?

In the classic example code, we can see that when writing components, we might use components, props, data, computed, methods, Lifecycle Methods, etc. These are some of the configuration options available. Similar to echarts options. In this case, there’s a problem. As with the search component mentioned in the Vue3 Essentials Course, if I want to implement a search component, the initialization code may be very small, but if I want to keep adding some additional functionality to the component, for example: Sorting, filtering, filtering, etc., will add a lot of code to data/methods, which are scattered and not conducive to reading and maintenance, we thought, if we can write the same logic of the code together, wouldn’t it be perfect?

For the above problems, VUe2 also has solutions, including mixins and slot methods. These methods have both advantages and disadvantages. The specific advantages and disadvantages of Vue3 Essentials Course are very good, and I recommend you to take a look.

How do you use Composition?

From the sample code in the composition file, we can see that it mainly uses the setup function, which is used within the component and is the entry point to the Composition API.

  • The props parameter for setup is not resolvable and is de-reactive
  • Setup does not have this