3.10 Browser -- useTitle

2024-09-03 18:28

文章标签 browser 3.10 usetitle

本文主要是介绍3.10 Browser -- useTitle，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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,} = optionsconst 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')