Head

Head 组件用于声明式地管理 document.head 中的内容，比如页面标题、meta 信息、样式和脚本等。这在 SSR（服务端渲染）场景下特别有用，可以让每个页面组件独立管理自己的 head 内容。

基本用法

tsx
import { Head } from 'vitarx'

function MyPage() {
  return (
    <>
      <Head>
        <title>我的页面</title>
        <meta name="description" content="这是页面描述" />
      </Head>
      <div>页面内容</div>
    </>
  )
}

Head 会自动将子元素添加到 document.head 中，并在组件卸载时自动清理。

属性

属性类型必填说明
childrenView | View[]是要添加到 head 的子元素

支持的元素

Head 支持所有合法的 head 子元素：

tsx
<Head>
  {/* 页面标题 — 使用 document.title API 设置，不直接插入 DOM */}
  <title>页面标题</title>

  {/* meta 标签 */}
  <meta name="description" content="页面描述" />
  <meta name="keywords" content="vitarx, 前端框架" />

  {/* favicon */}
  <link rel="icon" href="/favicon.ico" />

  {/* 样式 */}
  <style>{`body { margin: 0; }`}</style>

  {/* 脚本 */}
  <script src="https://example.com/analytics.js" async></script>
</Head>

title 的特殊处理

<title> 元素不会直接插入到 DOM 中，而是通过 document.title API 来设置页面标题。这样做的好处是：

  • 避免不必要的 DOM 操作
  • 组件卸载时会自动恢复之前的标题（前提是当前标题没有被其他地方修改）
tsx
import { Head } from 'vitarx'

function ProfilePage() {
  return (
    <>
      <Head>
        <title>用户中心</title>
      </Head>
      <div>用户中心内容</div>
    </>
  )
}

当 ProfilePage 卸载时，页面标题会自动恢复为之前的标题。

生命周期管理

Head 组件会自动管理添加的元素的生命周期：

  • 初始化：准备子元素的视图上下文（title 元素除外）
  • 挂载：将元素添加到 document.head 或通过 document.title 设置标题
  • 卸载：自动清理添加的元素，恢复之前的标题

你不需要手动清理，Head 会在组件卸载时自动处理。

完整示例

下面是一个多页面应用中，每个页面独立管理自己 head 内容的示例：

tsx
import { Head, ref } from 'vitarx'

/** 首页 — 设置标题和 SEO 信息 */
function HomePage() {
  return (
    <>
      <Head>
        <title>首页 - 我的网站</title>
        <meta name="description" content="欢迎来到我的网站" />
        <link rel="canonical" href="https://example.com/" />
      </Head>
      <div>
        <h1>首页</h1>
        <p>这是首页内容</p>
      </div>
    </>
  )
}

/** 关于页 — 设置标题和样式 */
function AboutPage() {
  return (
    <>
      <Head>
        <title>关于我们 - 我的网站</title>
        <meta name="description" content="了解更多关于我们的信息" />
        <style>{`
          .about-content {
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.8;
          }
        `}</style>
      </Head>
      <div class="about-content">
        <h1>关于我们</h1>
        <p>这是关于页面的内容</p>
      </div>
    </>
  )
}

/** 应用入口 — 切换页面 */
function App() {
  const currentPage = ref<'home' | 'about'>('home')

  return (
    <div>
      <nav style="margin-bottom: 16px;">
        <button
          onClick={() => {
            currentPage.value = 'home'
          }}
          style={{
            fontWeight: currentPage.value === 'home' ? 'bold' : 'normal',
            marginRight: '8px'
          }}
        >
          首页
        </button>
        <button
          onClick={() => {
            currentPage.value = 'about'
          }}
          style={{ fontWeight: currentPage.value === 'about' ? 'bold' : 'normal' }}
        >
          关于
        </button>
      </nav>
      {currentPage.value === 'home' ? <HomePage /> : <AboutPage />}
    </div>
  )
}

切换页面时，Head 会自动更新页面标题和 head 内容，卸载时自动清理。

下一步