1. Six highlights of Vue3.0
- Performance: 1.2 to 2 times faster than Vue 2.x
- Tree Shaking Support: Compiled on demand, smaller than Vue2. X
- Composition API(like React Hooks)
- Better TypeScript Support: Better Ts support
- Custom Renderer API: Exposes Custom rendering apis
- Fragments, Teleport(Protal), Suspense: More Advanced components
2. How does Vue3.0 get faster?
- Diff algorithm optimization:vue-next-template-explorer.netlify.app/
- The virtual DOM in Vue2 is a full comparison
- Vue3 has added a static flag. When comparing with the last virtual node, only the node with the patch flag is compared and the specific content of the current node to be compared can be learned from the information of the flag
- hoistStatic Static promotion
- Vue2 recreates and renders elements each time, regardless of whether they participate in updates or not
- Vue3 does static promotion for elements that do not participate in the update, which are created only once and reused directly during rendering
- CacheHandlers Event listener cache
- By default, onClick is treated as a dynamic binding, so it is tracked every time it changes, but because it is the same function, it is not tracked and can be cached and reused
- SSR rendering
- When there is a lot of static content, the content is pushed into a buffer as a string, even if there is a dynamic binding, which is embedded by template interpolation. This will be much, much faster than rendering through virtual DMO.
- When static content is of a certain magnitude, the _createStaticVNode method is used to generate a static node on the client side. These static nodes are innerHtml directly, eliminating the need to create objects and render from them.