Vue3新的内置组件

官方：https://v3.cn.vuejs.org/api/built-in-components.html

teleport是什么

如果用过 React 的同学，可能对于 Portals 比较熟悉。React 的 Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案，我理解，Vue 3 中的 Teleport 跟这个其实是类似的。

Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件。 -- Vue 官方文档

https://v3.cn.vuejs.org/api/built-in-components.html#teleport

将弹窗内容放入 Teleport 内，并设置 to 属性为 body，表示弹窗组件每次渲染都会做为 body 的子级，这样之前的问题就能得到解决。

<template>
  <teleport to="body">
    <div class="modal__mask">
      <div class="modal__main">
        ...
      </div>
    </div>
  </teleport>
</template>

https://codesandbox.io/embed/vue-modal-h5g8y

具体阅读：Vue3 Teleport 组件的实践及原理 https://segmentfault.com/a/1190000038335409

suspense

 Suspense是Vue3推出的一个内置的特殊组件； 如果使用Suspense,需要返回一个Promise

React 16.6 新增了 <Suspense> 组件，让你可以“等待”目标代码加载，并且可以直接指定一个加载的界面（像是个 spinner），让它在用户等待的时候显示：

import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));// 懒加载

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

• Suspense 组件常常和 React.lazy 配合使用。

• React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。

• React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。

defineAsyncComponent 类似于 React.lazy 函数。

Vue 中也有 Suspense 组件，React 中的类似。

const OtherComponent = defineAsyncComponent(() => import('./OtherComponent'));

<template>
  <Suspense>
    <template #default>
      <OtherComponent />
    </template>
    <template #fallback>
      Loading ...
    </template>
  </Suspense>
</template>

具名插槽的缩写是在 vue2.6.0 新增，跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

配合 vue-router 使

为了让<Suspense>组件等待这个异步组件的加载，我们可以使用lazy函数包裹这个异步组件工厂函数：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: lazy(() => import('./my-async-component.vue'))
    }
  ]
})

最后我们只需要用<Suspense>组件包裹渲染出口(<router-view>)即可：

<Suspense :delay="200">
  <div slot="fallback">loading</div>
  <!-- 渲染出口 -->
  <router-view/>
</Suspense>

更多的参考：https://shuidi-fed.github.io/vue-async-manager/zh/api.html#mode

转载本站文章《Vue3新的内置组件》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8691.html