Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

Vue2 is already very good and has a good community and ecosystem, but Vue3 is still optimized in three major areas: source code, performance and syntax apis

The source code

monorepo

The source code management approach is managed by monorepo, which splits these modules into different packages, each with its own API, type definition, and tests. In this way, module separation is more detailed, responsibility division is more clear, the dependency between modules is more clear, developers are easier to read, understand and change all module source code, improve the maintainability of the code

TypeScript

In Vue2 period, FLOW was selected. Since flow has some shortcomings in functions and TS has a better development momentum, Vue3 chooses TO use TS to write code, which can also better support TS to improve development experience

performance

Optimizing source code volume

Source code volume optimization is mainly carried out from two aspects:

Remove some unpopular apis such as filter, inline-template, etc

It’s easy to understand that fewer apis necessarily reduce code size

Tree-shaking was introduced to reduce packaging volume

Tree-shaking relies on the static structure of ES2015 module syntax (that is, import and export) to find and tag modules that are not introduced through static analysis at compile time, a technique that is already common in packaging tools like WebPack

Application in Vue3: We will probably not use all the APIS provided by Vue. There will always be some unpopular apis that cannot be used in a single business scenario, so we can remove these apis that are not used by users during the packaging process to reduce the packaging volume

Proxy

Before Vue2, object.defineProperty was used for data hijacking

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

It has some drawbacks

  • Must know in advance what the hijacked key is, can not listen to the object attributes added, deleted
  • Recursively traverses the entire data during initialization, resulting in a performance burden of deeply nested data structures,

Vue3 uses Proxy for data hijacking to avoid defects caused by Object.defineProperty

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

Composition API

Vue3 is synthetically optimized to provide Composition API instead of Options API

The Options API provides methods, computed, data, props, and life hooks for each stage, allowing developers to do things in each API for their own purposes ata very low cost of learning and understanding, making it very user-friendly for novice developers. When using its development and small project code readability and maintainability is also considerable, but when faced with large projects or more complex business logic, the code would become very difficult to maintain, often leading to modify a function need to jump several places in the code, a function code scattered in various places, the costs of reading and understanding the linear increase, Composition API, which has a great mechanism for solving this problem, is to put all the code related to a logical concern in a function so that when a function needs to be modified, there is no need to jump through the file