3.9 Browser -- usePreferredLanguages

3.9 Browser – usePreferredLanguages

https://vueuse.org/usePreferredLanguages

作用

它为web开发人员提供有关用户首选语言的信息。例如，这可能有助于根据用户的首选语言调整用户界面的语言，以提供更好的体验。

官方示例

import { usePreferredLanguages } from '@vueuse/core'

const languages = usePreferredLanguages() // [ "zh-CN", "zh" ]

源码分析

需要知道以下知识：

1. window.navigator.languages 拿到浏览器的首选语言
2. 可以监听languagechange事件

export function usePreferredLanguages(options: ConfigurableWindow = {}): Ref<readonly string[]> {
  const { window = defaultWindow } = options
  if (!window)
    return ref(['en'])

  const navigator = window.navigator
  const value = ref<readonly string[]>(navigator.languages)

  useEventListener(window, 'languagechange', () => {
    value.value = navigator.languages
  })

  return value
}