主要方法

useFavicon()

功能：管理网站favicon的动态切换，支持根据颜色模式（亮色/暗色）自动切换对应的favicon图标

返回值：

• updateFavicon: 手动更新favicon的函数

---

内部实现细节

updateFavicon()

功能：实际执行favicon更新的核心函数

执行逻辑：

1. 服务端检查：在服务器端环境直接返回，避免SSR错误
2. 查找现有favicon：通过DOM查询选择器查找类型为image/svg+xml的favicon链接
3. 颜色模式判断：根据当前的颜色模式（colorMode.value）决定使用哪个favicon
   • 暗色模式：使用 '/logo--white-transparent.svg'
   • 亮色模式：使用 '/logo--black-transparent.svg'
4. 智能更新：只在favicon路径确实发生变化时才更新，避免不必要的DOM操作
5. 路径构建：使用 window.location.origin 构建完整的favicon URL路径

---

监听与生命周期

颜色模式监听

watch(
  () => colorMode.value,
  () => {
    nextTick(() => updateFavicon())
  },
  { immediate: true }
)

immediate: true: 在监听器创建时立即执行一次，确保初始状态正确
nextTick(): 等待下一个DOM更新周期再执行，确保DOM已准备就绪

onMounted(() => {
  nextTick(() => updateFavicon())
})
//功能：在组件挂载完成后初始化favicon
//同样使用 nextTick() 确保DOM完全加载

版权所有

版权归属：Evoliant

许可证：MIT