3.10 Browser – useTitle
https://vueuse.org/core/useTitle/
作用
响应式的修改document
的标题
官方示例
import { useTitle } from '@vueuse/core'
const title = useTitle()
console.log(title.value) // print current title
title.value = 'Hello' // change current title
也可以在调用的时候直接指定title
const title = useTitle('New Title')
可以为参数传递一个ref
,当ref
发生变化时,页面的title
也会变化
import { useTitle } from '@vueuse/core'
const messages = ref(0)
const title = computed(() => {
return !messages.value ? 'No message' : `${messages.value} new messages`
})
useTitle(title) // document title will match with the ref "title"
通过一个可选的模板标签Vue Meta Title template来更新要注入到这个模板中的标题。
const title = useTitle('New Title', { titleTemplate: '%s | My Awesome Website' })
⚠️:observe
和 titleTemplate
不兼容
源码分析
这个函数的源码比较简单,主要学习一下对响应式数据的处理。官方示例的最后一种情况我们忽略,因为几乎不会使用。
export function useTitle(
newTitle: MaybeComputedRef<string | null | undefined> = null,
options: UseTitleOptions = {},
) {
const {
document = defaultDocument,
} = options
const title: WritableComputedRef<string | null | undefined> = resolveRef(newTitle ?? document?.title ?? null)
watch(
title,
(t, o) => {
if (t !== o && document)
document.title = isString(t) ? t : ''
},
{ immediate: true },
)
return title
}
resolveRef(newTitle ?? document?.title ?? null)
这里的??
,表示前一项为null
或者undefined
,才会去看后一项,0 和 ''
会被当成true
来处理。
- 这里的
resolveRef
,返回computed
或者ref
函数,具体是哪个要根据传入的参数来看。
export function resolveRef<T>(r: MaybeComputedRef<T>) {
return typeof r === 'function'
? computed<T>(r as any)
: ref(r)
}
借用官方示例的两个例子:
// 1 这传的是字符串,resolveRef返回的是ref('New Title')
const title = useTitle('New Title')
// 2 这里传的是ComputedRefImpl,resolveRef中,用ref包裹ComputedRefImpl,返回的结果还是ComputedRefImpl
// 见下图,title最终类型是ComputedRefImpl
const title = computed(() => {
return !messages.value ? 'No message' : `${messages.value} new messages`
})
useTitle(title)
// 3 但是如果传的是 () => 'new Title',这时候resolveRef会进入typeof r === 'function'这个判断,返回的也是ComputedRefImpl
const title = useTitle(() => 'new Title')