你知道哪些Vue3新特性

• Composition API

  • 使用函数的方式编写 vue 组件。
  • 组合式 API (响应式 API ref()、reactive()，生命周期钩子onMounted()、onUnmounted()，依赖注入inject()、provide())
  • 组合式 API 并不是函数式编程。

  虽然这套 API 的风格是基于函数的组合，但组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的，而函数式编程通常强调数据不可变。

• <script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。

  • 让代码更简洁，性能更好（不需要借助代理对象）。

• Teleport

  • 类似于 React 中的 Portal 传送门组件，指定将组件渲染到某个容器中。

  • 经常用于处理弹窗组件和模态框组件。

<button @click="open = true">打开模态框</button>
<Teleport to="body">
  <div v-if="open" class="modal">
    <button @click="open = false">关闭</button>
  </div>
</Teleport>

• Fragments

  • Fragment（片段）Vue3 中允许组件中包含多个节点。无需引入额外的 DOM 元素。

• Emits Component Option

  • Vue3 中默认绑定的事件会被绑定到根元素上。通过 Emits 属性可将事件从attrs 中移除。

• createRenderer API from @vue/runtime-core to create custom renderers

  • 提供自定义渲染器，可以在非 DOM 环境中使用 Vue 的运行时。

• 单文件组件中的状态驱动的 CSS 变量 (``中的v-bind)

  • 在 css 中使用 v-bind 绑定样式

    background: v - bind(color)

• SFC <style scoped> 新增全局规则和针对插槽内容的规则

  • 在作用域样式中可以包含全局规则或只针对插槽内容的规则

    /* 跨组件修改组件内样式 */
    .parent :deep(h1) {
      color: red;
    }
    /* 控制全局样式 */
    :global(.root) {
      width: 100px;
      height: 100px;
      background: yellow;
    }
    /* 控制插槽内容的样式 */
    :slotted(.child) {
      color: red;
    }

• Suspense experimental

  • 主要的作用优雅地处理异步组件的加载状态

<Suspense>
    <template #default>
        <!-- 可以配合async setup使用 -->
        <AsyncComponent></AsyncComponent>
    </template>
    <template #fallback>
        正在加载异步组件...
    </template>
</Suspense>