How to develop an online form system based on Vite+Vue3 (Part 1)

Today, Grape will show you how to implement a pure front-end online form system based on Vite+Vue3.
Before officially starting the project introduction, let's first introduce Vite and Vue3.

vue3

What is Vue? Most front-end developers are no stranger to this term. The three major frameworks are better and worse, and many developers express their opinions. Among them, Vue has quickly accumulated a large number of fans with its "simplest and easiest to use" name and has been widely studied and applied.
Like the Angular and React frameworks, Vue is also an MVVM-type framework, that is, a data-driven view. We only need to pay attention to data changes during development. The difference is that Vue is a more lightweight framework that is designed to be applied layer by layer from the bottom up. Its core library only focuses on the view layer, and implements responsive data binding and combined views through the simplest API possible. components.
Vue is already so good, why do you need Vue3?

This is to mention its shortcomings. In the previous Vue2, the options API (Options API) was used to divide the code into different attributes: data, computed, methods, etc. These method attributes have their own job.
The option API is easy to learn and easy to use, but it also brings a key problem: the code is messy and poorly readable.
For example, now we want to make a list view function, then we need to write related variables in data, and add related logical judgments and back-end interactions in methods. At this time, a new requirement came: adding search and filtering functions. No problem, continue to accumulate new variables in data, and organize new methods in methods... Writing code is refreshing for a while, but the programmers who maintain it later are dumbfounded. What are these piles of methods talking about?
Now that the drawback of Vue2 has been exposed, it is natural to try to solve it in its upgraded version. Therefore, Vue3 launched the composition API (Composition API), precisely to solve the problem of scattered code logic, difficult to understand and maintain in the original Vue2 project. It uses methods (functions) for code splitting, making the code more concise and readable.
Now that you have done it, you can't fall behind in other aspects! In terms of performance, Vue3 also optimizes the diff algorithm:
In Vue2, whenever the data changes, a new DOM tree is generated, and the new DOM tree is compared with the old DOM tree to judge the similarities and differences of nodes and update them. However, the complete traversal process needs to compare all the nodes of the two trees, but not all node contents will change in practice, which results in a waste of performance.
Vue3 adds a static tag, which only compares and further updates the marked nodes, without traversing the entire node, which improves performance.
Compared with Vue2, the official documents have specific data on Vue performance: SSR speed is increased by 2~3 times; Update performance is improved by 1.3~2 times. (Programmers are more confident to learn after seeing it!)

In addition, there are many APIs and modules in the Vue project, but we do not use all the content in the actual project. Vue3 introduces on-demand packaging modules for this, which can greatly compress the packaged content volume.
According to the comparison example on the official website, if only Hello Word is written in Vue2, and no module API is used, the packaged size is about 32KB; and Vue3 is the same, the packaged size is about 13.5KB, it can be clearly seen that the upgraded Vue3 phase Compared with Vue2, the package size is greatly reduced.
Compared with Vue2, the life cycle functions in Vue3 have also changed, which are summarized as follows:

Students in need can take screenshots and save them for emergencies.

After talking about Vue3, let's take a look at what Vite has to offer.

Vite

Before the official release of Vue3, You Yuxi mentioned a new front-end construction tool - Vite. He himself is very fond of Vite, which has attracted Webpack developers to call him big brother.
What kind of magical effect does Vite have? It does a local rapid development start:

1. No need to wait for packing operation, fast cold start
2. Instant module hot update
3. There is no need to wait for the entire project to be compiled, to achieve real on-demand compilation. When using Webpack, you will go through the analysis of dependencies => compilation and packaging => to the development server for rendering the entire process. That is to say, it needs to be packaged first, and then the packaged result is provided to the server for loading. With the increasing number of modules, the package size will become larger and larger, resulting in significantly slower hot update speed.
   Vite skips the packaging step, directly starts the development server, and compiles the module in real time when requesting a specific module, which greatly improves the startup speed.

So far, we have introduced the dazzling functions of the Vue3 upgrade and the advantages of Vite in detail. In the next part, we will start with a project example to introduce how to develop an online form system based on Vite+Vue3.
Interested friends don't miss it~