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>
例子