How to develop an online Excel spreadsheet 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

On September 18, 2020, Vue.js 3.0 was released. After two years of continuous optimization and adjustment of details, it finally officially became the new default version in February this year. Its author Yuxi You describes the goals of Vue3 as:
1. Faster
2. Smaller
3. Easier to maintain
4. Native targets are easier
5. Easier development Just looking at the above content, you may not feel what Vue3 has optimized. Here we compare it with Vue2 and explain its advantages for everyone.

performance improvement

There are specific data introductions on the performance differences between Vue2 and Vue3 in the official documentation:
1. SSR speed increased by 2~3 times
2. The performance of Update is improved by 1.3~2 times. The important point of the performance improvement is that the diff algorithm is optimized in Vue3.
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 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.

Composite API

Vue2 uses the Options API (Options API), which divides the code into different attributes: data, computed, methods, etc. These method attributes perform their own duties.
For example, when we want to implement a list view function, we need to write data related to this function in data, and write related logical judgments and back-end interaction methods in methods; if we also want to have search and filtering, or more function, then there will be more and more logical concerns, making the component difficult to understand and maintain. (The picture below is an example component)

The composition API (Composition API) is 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 to make the code more concise.

Lifecycle function changes

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.

Package modules on demand

There are many APIs and modules in the Vue project, but we will not use all the content in one project. The on-demand packaging module of Vue3 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.
After talking about the improvement of 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 even more fond of Vite, which has attracted the Webpack developers to call Big Brother:

What kind of magic does Vite have? It does a local rapid development start:

1. Fast cold start without waiting for packing operations
2. Instant module hot update
3. True on-demand compilation, without waiting for the entire project to be compiled,

When using Webpack, you will go through the whole process of analyzing dependencies => compiling and packaging => handing over to the development server for rendering. That is to say, it needs to be packaged first, and then the packaged result is provided to the server for loading. Especially with the increasing number of modules, the volume of the package is getting larger and larger, which causes the hot update speed to be significantly slowed down.
Vite skips the packaging step, starts the development server directly, and compiles the module in real time when a specific module is requested, which greatly improves the startup speed.

You Yuxi himself also explained the principle in a speech on Weibo: "Vite, a development server based on the browser's native ES imports. Use the browser to parse the imports, compile and return as needed on the server side, completely skipping the concept of packaging , the server can be used at any time. At the same time, it not only supports Vue files, but also handles hot updates, and the speed of hot updates will not slow down as the number of modules increases. For the production environment, you can use the same code to rollup. Although now It’s still relatively rough, but I think this direction has potential, and if it is done well, it can completely solve the problem of changing a line of code and waiting for a half-day hot update.”
(For the specific implementation principle of Vite, please refer to the article: https://juejin.cn/post/6844904136299790349 )

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~