1. Improve in many ways

1.1 Faster (key)

  1. Virtual DOM rewriting
  2. Optimization of slots generation
  3. Static tree lifting
  4. Static attribute promotion
  5. Reactive system based on Proxy

1.2 smaller

Optimize the core library volume by tree shaking

1.3 Easier to maintain

TypeScript + modularity, prompt and friendly on vscode, code prompt type detection.

1.4 More friendly

Cross-platform: Compiler core and runtime core are platform independent, making Vue easier to use with any platform (Web, Android, iOS)

1.5 Easier to use

  1. Improved TypeScript support, with editors that provide robust type checking and errors and warnings
  2. Better debugging support
  3. Independent responsive module
  4. Composition API (reuse of logic, like React hooks)

2. Key descriptions

2.1 Virtual DOM rewriting

With more detailed virtual DOM information, compile-time prompts/warnings/errors can be used to reduce runtime overhead and create virtual nodes with more efficient code. Component quick path + single call + child node type detection

  • Skip unnecessary conditional branches
  • JS engines are easier to optimize
  • Different nodes use different ways to create (cteateComponentVNode/createElementVnode), more detailed and accurate description of each node
  • CteateComponentVNode (Comp, NULL, NULL,0) // 0 indicates no, and 2 indicates a single child node. More specifically, it describes whether child nodes need to be created.

2.2 Optimization of slots generation

Parent and child levels can be individually rerendered in VUe3

  • Ensure that the instance tracks dependencies correctly
  • Avoid unnecessary parent/child component rerendering

2.3 Static Tree Ascending (as of July 1, 1997)

Using static tree promotion means that Vue 3’s compiler will be able to detect what is static and then promote it, reducing the cost of rendering.

  • In this example, the span of class=’foo’ is known to be static, so instead of executing the render function, we print __static1, which is referenced by the parent component.
  • Skip patching the entire tree to reduce rendering costs by checking the static type.
  • It works even if it appears multiple times

2.4 Static attribute promotion

With static attribute promotion, Vue 3 patches skip nodes whose attributes do not change.

  • When all attributes remain unchanged, the content is also promoted, and the patch is directly skipped when the unchanged identifier is found

2.5 Proxy-based data response

Vue 2’s reactive system uses getters and setters for Object.defineProperty. Vue 3 will use ES2015 Proxy as its observation mechanism, which will bring the following changes:

  • Component instance initialization speed increased by 100%
  • Using Proxy saves half the memory overhead and speeds up speed, but there are incompatibations with lower browser versions
  • To continue support for IE11, Vue 3 will release a build that supports both the old observer mechanism and the new Proxy version

2.6 High maintainability

Vue 3 will bring more maintainable source code. Not only does it use TypeScript, but many packages are decoupled and more modular. Because packages are more independent, cross-platform porting will be easier in the future.

packages--
> complier-core  / / core library
> complier-dom   // Browser specific
> complier-sfc
> complier-ssr
> reactivity    / / response type
> runtime-core  
> runtime-dom
> runtime-test
> server-renderer
> shared
> vue
Copy the code