Vue3 相当于Vue2 的提升

响应式原理(Proxy)

Vue3 使用了 Proxy 来实现响应式系统，而 Vue2 使用的是 Object.defineProperty。Proxy[ES6] 提供了更强大的功能，可以直接监听对象的新增和删除属性，而不需要像 Vue2 那样使用 Vue.set 和 Vue.delete。
这使得 Vue3 的响应式系统更加高效和灵活。

碎片化(Fragments)

Vue3 支持组件的多个根节点，这被称为“碎片化”（Fragments）。在 Vue2 中，每个组件只能有一个根节点，而 Vue3 允许组件返回多个根节点，这使得组件的结构更加灵活。

异步组件(Suspense)

Vue3 引入了 Suspense 组件，用于处理异步组件的加载状态。

import {defineAsyncComponent} from "vue";

const AsyncComp = defineAsyncComponent(() => {
    return new Promise((resolve, reject) => {
// ...load component from server
        resolve(/* loaded component */)
    })
})

const AsyncPopup = defineAsyncComponent({
    loader: () => import('./ArticleList.vue'),
    // 加载异步组件时使用的组件
    loadingComponent: LoadingComponent,
    // 加载失败时使用的组件
    errorComponent: ErrorComponent,
    // 在显示加载组件之前延迟。默认值：200ms。
    delay: 1000,
    // 超过给定时间，则会显示错误组件。默认值：Infinity。
    timeout: 3000
})

<Suspense>
  <template #default>
    <async-component/>
  </template>
  <template #fallback>
    Loading ...
  </template>
</Suspense>

传送门(teleport)

它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

<Teleport to="body"></Teleport>

禁用 Teleport

<Teleport :disabled="isMobile">
  ...
</Teleport>

延迟解析的 Teleport

在 Vue 3.5 及更高版本中，我们可以使用 defer prop 推迟 Teleport 的目标解析，直到应用的其他部分挂载。这允许 Teleport 将由 Vue 渲染且位于组件树之后部分的容器元素作为目标

<Teleport defer to="#late-div">...</Teleport>

<!-- 稍后出现于模板中的某处 -->
<div id="late-div"></div>

更小的核心代码

• 核心代码 + compositionApi：13.5kb ---- vue2为31.94kb
• 所有Runtime: 22.5kb ---- vue2 为32kb

更快的速度

• SSR速度提高2-3 倍
• 初始渲染/更新速度最高提高一倍
• 内存占用减少一半

更好的TypeScript支持