useFavicon
约 322 字大约 1 分钟
2025-08-23
主要方法
useFavicon()
功能:管理网站favicon的动态切换,支持根据颜色模式(亮色/暗色)自动切换对应的favicon图标
返回值:
updateFavicon: 手动更新favicon的函数
内部实现细节
updateFavicon()
功能:实际执行favicon更新的核心函数
执行逻辑:
- 服务端检查:在服务器端环境直接返回,避免SSR错误
- 查找现有favicon:通过DOM查询选择器查找类型为
image/svg+xml的favicon链接 - 颜色模式判断:根据当前的颜色模式(
colorMode.value)决定使用哪个favicon- 暗色模式:使用
'/logo--white-transparent.svg' - 亮色模式:使用
'/logo--black-transparent.svg'
- 暗色模式:使用
- 智能更新:只在favicon路径确实发生变化时才更新,避免不必要的DOM操作
- 路径构建:使用
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