• home > webfront > ECMAS > vue3 >

    Vue3新的内置组件

    Author:zhoulujun Date:

    官方:https: v3 cn vuejs org api built-in-components htmlteleport是什么如果用过 React 的同学,可能对于 Portals 比较熟悉。Reac

    官方: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/index.php?m=content&c=index&a=show&catid=330&id=8691