Vue3-Lazy-Hydration 使用教程

Vue3-Lazy-Hydration 使用教程

1. 项目介绍

vue3-lazy-hydration 是一个为 Vue 3 SSR 提供延迟预渲染 HTML 的库。它包含一个无渲染组件、可组合的函数和导入包装器，可以延迟服务器端渲染的 Vue.js v3 组件的水合过程，从而优化性能。

2. 项目快速启动

首先，您需要使用 yarn、npm 或 pnpm 包管理器来安装 vue3-lazy-hydration。

使用 yarn 安装：

yarn add vue3-lazy-hydration

使用 npm 安装：

npm install vue3-lazy-hydration

使用 pnpm 安装：

pnpm add vue3-lazy-hydration

安装完成后，可以在 Vue 组件中全局导入或直接在单文件组件（SFC）中导入 LazyHydrationWrapper 组件。

全局导入示例：

import { createSSRApp } from 'vue'
import { LazyHydrationWrapper } from 'vue3-lazy-hydration'

const app = createSSRApp([])
app.component('LazyHydrationWrapper', LazyHydrationWrapper)

在 SFC 中直接导入示例：

<template>
  <LazyHydrationWrapper @hydrated="onHydrated">
    <!-- 延迟水合的内容 -->
  </LazyHydrationWrapper>
</template>

<script setup>
import { LazyHydrationWrapper } from 'vue3-lazy-hydration'
function onHydrated() {
  console.log('内容已水合')
}
</script>

3. 应用案例和最佳实践

以下是一些使用 vue3-lazy-hydration 的常见场景：

• 延迟水合直到浏览器空闲：

<template>
  <LazyHydrationWrapper :when-idle="4000" @hydrated="onHydrated">
    <!-- 当浏览器空闲时水合内容 -->
  </LazyHydrationWrapper>
</template>

• 当根元素可见时延迟水合：

<template>
  <LazyHydrationWrapper :when-visible="{ rootMargin: '50px' }" @hydrated="onHydrated">
    <!-- 当一个根元素可见时水合内容 -->
  </LazyHydrationWrapper>
</template>

• 基于 DOM 事件（默认为 focus）触发延迟水合：

<template>
  <LazyHydrationWrapper :on-interaction="['click', 'touchstart']" @hydrated="onHydrated">
    <!-- 当元素触发 click 或 touchstart 事件时水合内容 -->
  </LazyHydrationWrapper>
</template>

• 手动触发延迟水合：

<template>
  <button @click="triggerHydration">触发水合</button>
  <LazyHydrationWrapper :when-triggered="triggered" @hydrated="onHydrated">
    <!-- 当点击上面的按钮时水合内容 -->
  </LazyHydrationWrapper>
</template>

<script setup>
import { ref } from 'vue'
import { LazyHydrationWrapper } from 'vue3-lazy-hydration'

const triggered = ref(false)
function triggerHydration() {
  triggered.value = true
}
function onHydrated() {
  console.log('内容已水合')
}
</script>

4. 典型生态项目

vue3-lazy-hydration 可以与 Vue 3 生态系统中的其他项目配合使用，例如：

• Nuxt 3：通过 nuxt-lazy-hydrate 插件，可以轻松在 Nuxt 3 项目中实现延迟水合。

这些是 vue3-lazy-hydration 的基本使用和最佳实践。更多信息请参考官方文档和项目仓库。