Vue中使用Unhead设置页面标题遇类型不匹配警告问题

问题原因 #

你当前的代码错误在于useHead的title回调返回了Ref实例本身，而Unhead要求该回调返回原始字符串/undefined（即Title类型），而非响应式对象，因此触发类型不匹配警告。

修正方案 #

方案一：直接访问Ref的value属性 #

修改useHead中的title回调，返回pageTitle.value即可解决类型问题：

import { ref } from 'vue';
const pageTitle = ref<string | undefined>(undefined);

useHead({
    title: () => pageTitle.value // 访问ref的value获取原始值
});

方案二：无需额外Ref，直接依赖响应式pet对象 #

可以省去中间变量pageTitle，直接在title回调中使用pet的响应式值，Unhead会自动追踪依赖并更新标题：

import { ref } from 'vue';
const pet = ref({ name: undefined });

useHead({
    // 当pet.name变化时，标题自动更新，还可设置默认值
    title: () => pet.value?.name || '默认页面标题'
});

方案三：保留中间变量的优化写法 #

如果确实需要pageTitle作为中间状态，你的watch逻辑是可行的，只需确保useHead的title回调返回原始值：

import { ref, watch } from 'vue';
const pet = ref({ name: undefined });
const pageTitle = ref<string | undefined>(undefined);

watch(() => pet.value?.name, (newName) => {
    pageTitle.value = newName;
});

useHead({
    title: () => pageTitle.value || '默认标题'
});

补充说明 #

Unhead的title字段支持两种写法：

• 直接传入字符串：title: '固定标题'
• 传入回调函数：回调需返回字符串/undefined，Unhead会自动处理响应式依赖的更新，无需手动调用更新方法

内容的提问来源于stack exchange，提问作者studio-pj