feat(usePerformanceObserver): new function (#2736)

Co-authored-by: Admin <Admin@PF25TD71-PHW.inc.bytedance.com>
Co-authored-by: Jelf <okxiaoliang4@gmail.com>
Co-authored-by: Jelf <353742991@qq.com>

packages/core/index.ts

@@ -78,6 +78,7 @@ export * from './useOffsetPagination'
 export * from './useOnline'
 export * from './usePageLeave'
 export * from './useParallax'
+export * from './usePerformanceObserver'
 export * from './usePermission'
 export * from './usePointer'
 export * from './usePointerLock'

packages/core/usePerformanceObserver/demo.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { usePerformanceObserver } from '@vueuse/core'
+import { ref } from 'vue'
+
+const entrys = ref<PerformanceEntry[]>([])
+usePerformanceObserver({
+  entryTypes: ['paint'],
+}, (list) => {
+  entrys.value = list.getEntries()
+})
+const refresh = () => window.location.reload()
+</script>
+
+<template>
+  <button @click="refresh">
+    refresh
+  </button>
+
+  <pre lang="json">{{ entrys }}</pre>
+</template>

packages/core/usePerformanceObserver/index.md

@@ -0,0 +1,20 @@
+---
+category: Browser
+---
+
+# usePerformanceObserver
+
+Observe performance metrics.
+
+## Usage
+
+```ts
+import { usePerformanceObserver } from '@vueuse/core'
+
+const entrys = ref<PerformanceEntry[]>([])
+usePerformanceObserver({
+  entryTypes: ['paint'],
+}, (list) => {
+  entrys.value = list.getEntries()
+})
+```

packages/core/usePerformanceObserver/index.ts

@@ -0,0 +1,54 @@
+import { tryOnScopeDispose } from '@vueuse/shared'
+import { useSupported } from '../useSupported'
+import type { ConfigurableWindow } from '../_configurable'
+import { defaultWindow } from '../_configurable'
+
+export type UsePerformanceObserverOptions = PerformanceObserverInit & ConfigurableWindow & {
+  /**
+   * Start the observer immediate.
+   *
+   * @default true
+   */
+  immediate?: boolean
+}
+
+/**
+ * Observe performance metrics.
+ *
+ * @see https://vueuse.org/usePerformanceObserver
+ * @param options
+ */
+export function usePerformanceObserver(options: UsePerformanceObserverOptions, callback: PerformanceObserverCallback) {
+  const {
+    window = defaultWindow,
+    immediate = true,
+    ...performanceOptions
+  } = options
+
+  const isSupported = useSupported(() => window && 'PerformanceObserver' in window)
+
+  let observer: PerformanceObserver | undefined
+
+  const stop = () => {
+    observer?.disconnect()
+  }
+
+  const start = () => {
+    if (isSupported.value) {
+      stop()
+      observer = new PerformanceObserver(callback)
+      observer.observe(performanceOptions)
+    }
+  }
+
+  tryOnScopeDispose(stop)
+
+  if (immediate)
+    start()
+
+  return {
+    isSupported,
+    start,
+    stop,
+  }
+}