Vue-presetup NPM

vue-presetup

仅适用于 Vue3。

vue-presetup 可以将指定的 Vue 组件进行提前加载，并在组件“准备好”后再进行下一步操作。

如从当前路由 /foo 跳转至 /bar 时，可以先提前在 /foo 页面加载 /bar 对应的组件，随后再进行路由切换

安装

通过 npm 安装

npm install vue-presetup -S

通过 yarn 安装

yarn add vue-presetup -S

通过 pnpm 安装

pnpm install vue-presetup -S

基础使用示例

有一个简单的使用示例，这个示例是摘自 playground 中的。

有以下的路由配置：

router.ts

import { createRouter, createWebHashHistory } from 'vue-router'
import Foo from './views/Foo.vue'
import Bar from './views/Bar.vue'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      redirect: '/foo'
    },
    {
      path: '/foo',
      component: Foo
    },
    {
      path: '/bar',
      component: Bar
    }
  ]
})

export default router

在 App.vue 使用路由并放置 vue-presetup 需要的载体：

App.vue

<script setup lang="ts">
import { PresetupView } from 'vue-presetup'
</script>

<template>
  <RouterView v-slot="{ Component }">
    <PresetupView :active="Component"></PresetupView>
  </RouterView>
</template>

在可能被提前加载的 /bar 组件需要做一些反馈，来告知当前组件什么时候准备好（实际情况可能是首屏数据加载好了等）

Bar.vue

<script lang="ts" setup>
import { ref } from 'vue'
import { useContext } from 'vue-presetup'

const context = useContext()

window.setTimeout(() => {
    // 在 1500ms 后，这个组件准备好了！
    context.resolve()
}, 1500)
</script>

<template>
  <div class="Bar">
    <h1>Bar.vue</h1>
  </div>
</template>

接下来，就可以实现在 /foo 中提前加载 /bar 组件

Foo.bar

<script lang="ts" setup>
import { ref } from 'vue'
import { useSetupComponent } from 'vue-presetup'
import router from '../router'
import Bar from './Bar.vue'

const { setupComponent } = useSetupComponent()

const go = async () => {
  // 等待组件加载完成
  await setupComponent(Bar)
  router.push('/bar')
}
</script>

<template>
  <div class="Foo">
    <h1>Foo.vue</h1>
    <button @click="go">Go</ElButton>
  </div>
</template>

与 Transition、KeepAlive 一起使用

编辑上述示例中 App.vue

<script> /* ... */ </script>
<template>
  <RouterView v-slot="{ Component }">
    <PresetupView :active="Component" v-slot="{ Component: Component2 }">
      <Transition name="fade" mode="out-in">
        <KeepAlive include="foo">
          <component :is="Component2"></component>
        </KeepAlive>
      </Transition>
    </PresetupView>
  </RouterView>
</template>

API

PresetupView

Type: Component

Props:

+ `active`: 期望渲染的 VNode

useSetupComponent

Type: Hook

Return: { setupComponent }

这是一个 Vue3 Hook，因此只能在 setup 函数中使用。

<script setup lang="ts">
import { useSetupComponent } from 'vue-presetup'
import Bar from './Bar.vue'

const { setupComponent } = useSetupComponent()

const next = async () => {
    await setupComponent(Bar, /* props */)
}
</script>

setupComponent

Params:

Component
需要加载的组件对象，这个组件必须有 name 属性，否则会收到一个被 reject 的 Promise；
同一组件（相同的 name ，后同）可预加载的数量是有限的（一个），在后面预加载的组件会覆盖之前已加载过的同一组件。

props

传递给组件的参数，在 Vue 组件中是区分 Props 和 Attrs 的，因此在组件内部接收这个参数时候需要声明 Props，否则会给 Vue 理解为 Attrs，如下面这个示例，在 Comp.vue 中，p1,p2 在组件的 props 中，p3 是 attrs 中：

Comp.vue

<script setup lang="ts">
const props = deineProps(['p1', 'p2'])
</script>

Foo.vue

<script setup lang="ts">
import { useSetupComponent } from 'vue-presetup'
import Comp from './Comp.vue'

const { setupComponent } = useSetupComponent()

const next = async () => {
    await setupComponent(Comp, {
        p1: 1,
        p2: 2,
        p3: 3
    })
}
</script>

TODO: useContext

useContext

Type: Hook

Return Context

这是一个 Vue3 Hook，因此只能在 setup 函数中使用。

用在可能会被预加载的组件中，如基础使用示例的 Bar.vue

Context

interface UseContextResult {
  // 在当前组件“准备好”调用，以告知预加载完成。如当前组件不是通过预加载，此方法什么都不会发生。
  resolve: Callback
  // 在当前组件中预加载发生错误时候调用。如当前组件不是通过预加载，此方法什么都不会发生。
  reject: Callback
  // 获取在 setupComponent 中传递的参数。如当前组件不是通过预加载，此方法没有办法获取任何值，除非你提供了 defaultValue
  get<R = unknown>(key: string): R | undefined
  get<R = unknown>(key: string, defaultValue: R): R
}