VueUse usePerformanceObserver 性能指标

VueUse usePerformanceObserver 性能指标，usePerformanceObserver 可用于获取性能相关的数据，例如首帧fp、首屏fcp、首次有意义的绘制fmp等等。

代码示例

import { usePerformanceObserver } from '@vueuse/core'

const entrys = ref<PerformanceEntry[]>([])
usePerformanceObserver({
  entryTypes: ['paint'],
}, (list) => {
  entrys.value = list.getEntries()
})

实例代码

<script setup>
import { usePerformanceObserver } from '@vueuse/core'
import { ref } from 'vue'

const entrys = ref<PerformanceEntry[]>([])
usePerformanceObserver({
  entryTypes: ['paint'],
}, (list) => {
  entrys.value = list.getEntries()
})
function refresh() {
  return window.location.reload()
}
</script>


<template>
  <button @click="refresh">
    refresh
  </button>
  <pre>{{ entrys }}</pre>
</template>

在线例子

例子