useTitle 是 VueUse 库的工具函数！

🎯 核心功能

useTitle 用于响应式地修改浏览器页面标题。

💡 基本用法

import { useTitle } from '@vueuse/core'

// 创建响应式标题
const title = useTitle()

// 修改标题
title.value = '新的页面标题'
// 浏览器 标签页 标题 会自动更新

📊 主要特性

💡 高级用法

1. 带默认值

// 设置初始标题
const title = useTitle('SofTool.CN - 物联网平台')

// 之后可以修改
title.value = '设备管理 - SofTool.CN'

2. 带模板的标题

// 使用模板字符串
const deviceName = ref('温度传感器')
const pageTitle = useTitle()

// 自动响应 deviceName 变化
watchEffect(() => {
  pageTitle.value = `${deviceName.value} - 设备详情 - SofTool.CN`
})

3. 恢复原始标题

const title = useTitle()
const originalTitle = document.title

// 修改标题
title.value = '新标题'

// 恢复原始标题
title.value = originalTitle
// 或
document.title = originalTitle

🔄 与传统方式的对比

传统方式

// 直接操作 document.title
document.title = '新标题'

// 问题：
// 1. 不是响应式的
// 2. 没有类型提示
// 3. 需要手动管理

VueUse 方式

// 使用 useTitle
import { useTitle } from '@vueuse/core'

const title = useTitle('默认标题')
title.value = '新标题'  // 响应式更新

// 优点：
// 1. 响应式
// 2. 类型安全
// 3. 组合式 API
// 4. 自动清理

📈 SEO 优化

1. 关键词优化

// 根据页面内容动态设置SEO标题
const seoTitle = computed(() => {
  const keywords = {
    dashboard: '物联网仪表板,设备监控,数据分析',
    devices: '设备管理,物联网设备,传感器管理',
    alarms: '告警管理,实时告警,故障监控'
  }

  const routeName = route.name as string
  const keyword = keywords[routeName] || '物联网平台'

  return `SofTool.CN - ${route.meta.title} | ${keyword}`
})

const pageTitle = useTitle(seoTitle)

2. 多语言标题

// 支持多语言标题
const { t } = useI18n()
const route = useRoute()
const pageTitle = useTitle()

// 根据语言和路由设置标题
watch([() => route.name, () => locale.value], () => {
  const title = t(`pageTitles.${route.name}`)
  pageTitle.value = `${title} - SofTool.CN`
})

🎯 TypeScript 支持

// 完整类型支持
import { useTitle } from '@vueuse/core'

// 类型推断
const title = useTitle<string>('初始标题')
title.value = '新标题'  // ✅
title.value = 123      // ❌ 应该是 string

💡 注意事项

1. SSR 兼容性

// 在服务器端渲染中安全使用
import { useTitle } from '@vueuse/core'

// SSR 环境下会自动处理
const title = useTitle('默认标题')

2. 内存管理

// useTitle 会自动清理
// 组件卸载时，不会泄漏内存

3. 性能考虑

// 避免频繁更新
// 防抖处理
import { useTitle, useDebounceFn } from '@vueuse/core'

const title = useTitle()
const updateTitle = useDebounceFn((newTitle) => {
  title.value = newTitle
}, 300)

// 防抖更新
updateTitle('新标题')

📋 总结

useTitle 是 VueUse 库提供的工具，不是 Vue 3 核心 API：

1. ✅ 来源：VueUse 工具库
2. ✅ 功能：响应式修改页面标题
3. ✅ 优势：类型安全、响应式、SSR 支持
4. ✅ 场景：动态标题、SEO 优化、多语言
5. ✅ 性能：自动清理、性能优化