仅限客户

什么是只有Vue客户?

此组件只帮助您在客户端生成组件 。 仅支持 Vue3

安装

npm install --save @duannx/vue-client-only
or
yarn add @duannx/vue-client-only

使用量

import ClientOnly from '@duannx/vue-client-only'

<client-only>
    <some-component></some-component>
    This will be render only in the client
    <template #placeholder>
      This is the placeholder that will be render on SSR
    </template>
</client-only>

占位符

使用 placeholder 用于渲染 SSR 软件的插槽

<client-only>
    This will be render only in the client
    <template #placeholder>
      This is the placeholder that will be render on SSR
    </template>
</client-only>

道具

• is-show:布尔. 使用此道具来准确控制组件在客户端上被提供时. 如果您不设置此道具, 组件只有在组件被挂起时才会在客户端上提供.

<!-- The default slot will be shown only when isShow is set to true -->
<client-only :is-show="isShow">
    This will be render only in the client
    <template #placeholder>
      This is the placeholder that will be render on SSR
    </template>
</client-only>

何时使用此组件?

• 当一个组件无法在服务器侧运行时。 。 。 . 没有. 你可以把只能在浏览器上运行的逻辑移动到挂载的钩子上. 无需使用此组件 .
• 当面对错误时: Hydration mismatch。 。 。 . 没有。 请. 此错误由客户端中的组件状态与服务器中的状态或部分状态不匹配所引起 不正确的 HTML 嵌入标记. 你需要找到根源并修复它。 须寻取出根并修. 过度使用这一构成部分将消除安全部门改革的好处.
• 想要减少服务器工作量时 . 此组件将推迟在服务器一侧渲染组件 。 所以您的服务器会运行得更快,有更好的服务器响应时间,并减少向客户端传输的文件大小.
• 当您想要推迟客户端组件的渲染时 . 这个 is-show 道克会帮你的 几乎是时间,在页面加载时,下行内容并不有用. 这样您就可以将所有下行内容的渲染延迟到页面被加载或用户与页面交互时. 示例,此代码会将内容的渲染延迟到用户点击或滚动页面时:

<script setup>
  import ClientOnly from '@duannx/vue-client-only'
  import { onMounted } from '@vue/runtime-core'
  const isShow = ref(false)
  onMounted(() => {
    ['keydown', 'click', 'touchstart', 'scroll'].forEach((type) => {
      addEventListener(type, () => {
        isShow.value = true
      }, { once: true, capture: true });
    })
  })
</script>
<template>
Some above the fold content ...
<ClientOnly :is-show="isShow">
  <p>This content is loaded after the user input</p>
  <template #placeholder>
    <p>Content placeholder. Click anywhere to show the main content...</p>
  </template>
</ClientOnly>
</template>

德莫尔

这个 德莫尔 只有客户一方。 它显示了组件在客户端中的样子. 演示码

捐款

请阅读 捐款额 关于我们代码的细节 以及向我们提交拉动请求的程序.

版本

仅限客户 使用情况 交换器 用于版本.

许可证

这个项目根据麻省理工学院许可证颁发——见 自由主义 文件 详细情况.