A brief discussion on several advantages of Vue3

Vue2 is already very good and has a complete community and ecosystem, but Vue3 is still optimized in three major aspects: source code, performance, and syntax API.

1. Source code

1.1 Monorepo

The source code management method is monorepo . monorepo splits these modules into different package , each package has its own API, type definition and test. This makes the module splitting more detailed, the division of responsibilities more clear, the dependencies between modules more clear, and it is easier for developers to read, understand and change all module source codes, improving the maintainability of the code.

1.2 TypeScript

In the Vue2 period, flow was chosen. Since flow itself has some functional shortcomings and TS has a better development momentum, Vue3 chooses to use TS to write code, which can also better support TS to improve the development experience

2. Performance

2.1 Optimize source code size

The source code volume was optimized mainly from two aspects:

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

Reducing the API will inevitably reduce the code size, which is very easy to understand

Introducing tree-shaking to reduce bundle size

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

Application in Vue3: We are unlikely to use all API provided by Vue . There will always be some unpopular APIs that are not used in a single business scenario. In the packaging process, these API that are not used by users can be removed to reduce the packaging size.

2.3 Proxy

Vue2 previously used Object.defineProperty for data hijacking

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

It has some flaws

• You must know in advance what the hijacked key is, and cannot monitor the addition and deletion of object properties very well.
• The entire data is recursively traversed during initialization, resulting in a performance burden for deeply nested data structures.
• Vue3 uses Proxy for data hijacking, which can effectively avoid the defects caused by Object.defineProperty

p = new Proxy(source, {
  get() {
    // todo...
  },
  set() {
    // todo...
  }
})

2.4 Composition API

Vue3 has been optimized in terms of syntax, mainly providing Composition API to replace the original Options API

Options API provides methods , computed , data , props , and life hook options for each stage. Developers can do corresponding things in each API, each performing their own duties. 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. However, when encountering large projects or more complex business logic, the code will become very difficult to maintain. It often leads to the need to jump to multiple places in the code to modify a function. The code of a function is scattered in various places, causing the cost of reading and understanding to increase sharply. Composition API has a good mechanism to solve this problem, which is to put all the code related to a certain logical concern in one function, so that when a function needs to be modified, there is no need to jump back and forth in the file.

This concludes this article on the advantages of Vue3. For more information about the advantages of Vue3, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!