VueUse useMemory 响应式的内存信息

VueUse useMemory 响应式内的存信息,可以获取当前网页内存使用情况以及可使用的额度。

代码示例

import { useMemory } from '@vueuse/core'

//isSupported 是否支持获取内存信息
//memory 内存使用情况
const { isSupported, memory } = useMemory()

在线例子

例子

例子代码

<template>
 <div>
  <div><label>isSupported:</label><span>{{ isSupported }}</span></div>
  <div><label>Used:</label><span>{{ size(memory.usedJSHeapSize) }}</span></div>
  <div><label>Allocated:</label><span>{{ size(memory.totalJSHeapSize) }}</span></div>
  <div><label>Limit:</label><span>{{ size(memory.jsHeapSizeLimit) }}</span></div>
 </div>
</template>
<script setup lang="ts">
/*
vueuse 中文文档
https://www.itxst.com/vueuse/tutorial.html
*/
import { useMemory } from '@vueuse/core'

const size=(v: number)=> {
  const kb = v / 1024 / 1024
  return `${kb.toFixed(2)} MB`
}
const { isSupported, memory } = useMemory()
</script>