Vue performance

Vue中进行performance优化

最近在学chrome中的performance，可以查看具体调用函数的执行时长，从而进行性能优化

普通的JS，点击后面的js可以跳转到此函数的地方

但是在vue项目中，看到的都是vue的源码函数

例如如下代码，渲染的时候会很卡

<script setup lang="ts">
const arr = Array.from({length: 2000}).fill(0)
</script>

<template>
  <ElSelect v-if="show">
    <ElOption v-for="(item, index) in arr" :key="index" :value="index" :label="index"></ElOption>
  </ElSelect>
</template>

项目中需要定位是此组件引起的卡顿，在performance中查看，看到的都是vue的源码函数，不知道这个组件是什么

尝试使用vueDevTools的performance，监测不到进页面的情况，只能检测加载完成后续变化

通过查看官方文档，vue官方提供了一个配置 app.config.performance = true

开启此配置后，可以在时间的位置看到是哪个组件引起了渲染卡顿

非常好用

有什么不对/不足的地方欢迎指正