Boss You Yuxi posted an idea on Weibo a while ago, saying that Vue 3 has now become the new default version! For me who is still using vue2, it is really a bit confusing. Now that it has become the default version, it means that our front-end has to start learning new knowledge again (we have to continue learning after graduation)
First, let’s introduce the improvements of vue3 compared to vue2:
Compostion api 代替了 Option api ，Compostion API 中时根据逻辑相关组织代码的，提高可读性和可维护性性能比Vue2.x快1.2~2倍；按需编译，体积比vue2.x更小响应式 Proxy 代替 Object.defineProperty对 typescript 支持更好，更先进的组件
Next, let’s introduce the specific new features of vue3?
.Composition API：组合API，类似React Hooks
.Performance：性能比vue2.x块1.2～2倍
.Tree shaking support：支持按需编译，体积更小
.Custom Renderer API：暴露了自定义渲染API
.Fragment，Teleport（Protal），Suspense：新增三个组件
.Better TypeScript support：更好的支持TS
Composition API
A set of low-intrusive, functional APIs that allow us to "combine" component logic more flexibly. Composition API is inspired by React Hooks and is more powerful than mixins. It can improve the reusability of code logic. In vue2, we use the Options API. What is the Options API? That is, we usually define attributes and methods in data, methods, computed, watch, etc. to handle the logic on the page. This method is the so-called Options API. But if there are many methods, front-end maintenance will be very troublesome. But the Composition API will solve this problem very well.
Performance
The performance of vue3.0 is 1.2 to 1.5 times faster than vue2.0. The main reasons are as follows:
.运用了diff方法优化
.静态提升,对于不参与更新的元素，只会被创建一次，在渲染时直接复用
.cacheHandlers 事件侦听器缓存,默认情况下onClick会被视为动态绑定，所以每次都会区追踪它的变化，但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用。当静态内容大到一定量级的时候，会用_createStaticVNode方法在客户端去生成一个static node。这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染。
.ssr 渲染,当静态内容大到一定量级的时候，会用_createStaticVNode方法在客户端去生成一个static node。这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染。
Tree shaking support
The core APIs in Vue3.x all support tree-shaking. These APIs are introduced through packages rather than injected directly during instantiation. Only the functions or features used are packaged (packaged on demand). This Means more functions and smaller size.
Custom Renderer API
Opened the API of custom render function, namely Custom Renderer API.
Fragment，Teleport（Protal），Suspense
- Fragment: In vue3, components are introduced. Components can have no root tags, and multiple tags will be included in a Fragment virtual element internally. Reduced label levels and reduced memory usage
- Teleport (Protal): Teleport provides a clean method to insert and display the HTML of the component under a specific tag (most likely body) outside the parent component interface.
- Suspense: They allow our application to render some fallback content while waiting for an asynchronous component, allowing us to create a smooth user experience
Better TypeScript support
Vue3.x is rewritten in TypeScript