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