Vue3 new features

Vue3 new feature 1- Performance improvement

Compared with Vue2, THE performance of Vue3 is much better. Why can Vue3 achieve the performance improvement?

  1. Static content is no longer updated

    • Static nodes are no longer updated (hoistStatic -> SSR optimization)
    • Statically bound class, id is not updated
    • hoistStatic automatically optimizes for multiple static nodes and outputs strings

How to do this: When the template is compiled into the syntax tree, the dynamic content is packaged with patchFlag and then updated. According to patchFlag, the dynamic content is checked and the static content is not updated. If there are many static content, the static content will be optimized

- CacheHandlers reduce the number of objects created and optimize memoryCopy the code

- Load on demand, the API is officially packaged as a function, and automatically loaded when neededCopy the code

Vue3 new feature 2- Ts support, new features Fragment,Teleport, Suspense

Support for Ts, new fragments,Teleport, Suspense

Vue3 new feature 3- Load on Demand (with Vite) & composite API

Why the Compisition API

Cause one: Vue2 is difficult to maintain for complex logical components

Logic is split into components, data, methods… Related logical fields are isolated from each other in methods, data, and so on

Cause two: Vue2 code reuse methods, such as Minxin, filter, and slot, are defective

Minxin

  • Namespace conflicts – If a variable is defined in Minxin and the same variable name is defined in the Data component that introduced Minxin, the variable defined in Data takes precedence
  • The logic is not clear. After Minxin is introduced, it is not easy to view the related logic
  • Not easy to reuse. Methods defined in Minxin are not easy to reuse

Scoped slot Scope slot

  • Configuration items more
  • Code division
  • Performance is poor

Cause three: Vue2 does not support Ts

conclusion

Using the compisitionAPI, complex component logic can be separated and shared between components

Vue3 change

  • Combined API+ functional programming
  • Logical sharing between components
  • Vite is lightweight and relatively fast