Shulou(Shulou.com)06/03 Report--

This article mainly introduces the advantages of Vue3, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

1. Source code 1.1 monorepo

Source code management is managed by monorepo. Monorepo splits these modules into different package, and each package has its own API, type definition, and testing. This makes the division of modules more detailed, the division of responsibilities clearer, the dependencies between modules more clear, and it is easier for developers to read, understand and change the source code of all modules, so as to improve the maintainability of the code.

1.2 TypeScript

Flow was chosen in the period of Vue2. Because flow itself has some functional shortcomings, and the development momentum of TS is better, Vue3 chooses to use TS to write code, which can better support TS to enhance the development experience.

2. Performance

2.1 optimize the volume of source code

The volume of the source code is optimized from two aspects:

Remove some unpopular API, such as filter, inline-template, etc.

It is easy to understand that a reduction in API will inevitably reduce the size of the code.

Introducing tree-shaking to reduce Packaging Volume

Tree-shaking relies on the static structure of ES2015 module syntax (i.e. import and export). Through static analysis in the compilation phase, it finds and marks the modules that have not been introduced. This technology has become very popular on packaging tools such as webpack.

Application in Vue3: it is very likely that we will not use all the API provided by Vue. There will always be some unpopular API that cannot be used in a single business scenario, so these API that are not used by users can be removed in the process of packaging to reduce the package volume.

2.3 Proxy

Vue2 used Object.defineProperty for data hijacking before

Object.defineProperty (source, key, {get () {/ / todo... }, set () {/ / todo... })

It has some defects.

You must know in advance what the hijacked key is, and you can't listen well to the addition and deletion of object attributes.

Recursively traverse the entire data during initialization, resulting in a performance burden caused by deeply nested data structures

Vue3 uses Proxy for data hijacking, which can avoid the defects brought by Object.defineProperty.

P = new Proxy (source, {get () {/ / todo... }, set () {/ / todo... }) 2.4 Composition API

Vue3 optimizes the syntax, mainly by providing Composition API to replace the original Options API

Options API provides methods, computed, data, props and various stages of life hook options. Developers can do their own things in each API. The cost of getting started and understanding is very low, and it is very friendly to novice developers. When using it to develop small projects, the readability and maintainability of the code are also considerable, but when you encounter large projects or more complex business logic, the code will become very difficult to maintain, often resulting in the modification of a function needs to jump to multiple places in the code, the code of a function is scattered in various places, resulting in a straight increase in reading and understanding costs, Composition API It has a good mechanism to solve this problem, which is to put all the code related to a logical concern in one function, so that when you need to modify a function, you no longer need to jump around in the file.

Thank you for reading this article carefully. I hope the article "what are the advantages of Vue3" shared by the editor will be helpful to everyone? at the same time, I also hope that you will support and pay attention to the industry information channel, and more related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.