vue3实现响应式切换地址栏favicon.ico图标

利用响应式来进行图标的动态更新

• 思路：编写一个useFavicon的函数，在函数中定义一个更新图标的方法，和一个响应式数据变量，并在内部监听该响应式变量，当发生改变就调用更新的方法。

function useFavicon(newIcon?:string){
  const favicon = ref(newIcon)
  function update(icon){
  	//匹配头部关于icon的link
    document.head.querySelectorAll('Link[rel*="icon"]')
    .forEach(el => el.href = icon)
  }
	
  const reset = ()=>favicon.value = '/favicon.ico'
  //当响应式变量favicon发生改变时触发更新
  watch(favicon,(i)=>{
      update(i)
  })
  //将响应式变量暴露给外部，以便修改
  return {favicon,reset}
}

• -关于怎么更新：由外部操作暴露出去的响应式变量，内部监听器就会触发更新

<script setup lang="ts">
import ico from './assets/test.ico'

const {favicon,reset} = useFavicon();

const loading = ()=>favicon.value = ico
</script>
<template>
	<div @click="loading">切换icon</div>
</template>

标签：const,更新,favicon,响应,ico,地址栏,icon
来源： https://blog.csdn.net/weixin_44221214/article/details/121188745