Inspector de Vue

Cómo usar esta herramienta para desarrolladores

1. Pega el SFC completo.
2. Ejecuta “Inspeccionar Vue”.
3. Revisa métricas, listas de símbolos y notas.
4. Confirma las observaciones dentro del repositorio antes de refactorizar.

Qué hace esta herramienta para desarrolladores

El informe concentra métricas y nombres relevantes para detectar rápidamente el tamaño y las dependencias aparentes del componente.

Los aliases de import, auto-imports, macros personalizadas y APIs indirectas pueden hacer que algunas métricas sean aproximadas.

Ejemplo

Entrada de ejemplo

<template>
  <UserCard class="card" :user="user" @select="selectUser" />
</template>
<script setup>
import { ref, computed } from "vue"
import UserCard from "./UserCard.vue"
const props = defineProps({ user: Object })
const emit = defineEmits(["select"])
const open = ref(false)
const label = computed(() => open.value ? "Open" : "Closed")
function selectUser(){ emit("select") }
</script>
<style scoped>.card { padding: 1rem; }</style>

Ejecuta la herramienta para ver una salida generada a partir de este ejemplo.

Casos de uso

• Evaluar rápidamente el tamaño reactivo de un componente.
• Comprobar props y eventos expuestos.
• Detectar componentes usados sin import local aparente.
• Preparar una revisión técnica antes de profundizar en el código.

Consejos para obtener resultados fiables

• Interpreta las métricas como señales, no como reglas absolutas.
• Ten en cuenta auto-imports configurados por plugins.
• Revisa watchers y efectos por su impacto real, no solo por cantidad.
• Divide componentes solo cuando la separación mejore responsabilidades y pruebas.

Detalles del procesamiento

Las métricas se calculan sobre el texto del SFC y no ejecutan macros ni imports.

No conoce configuración de auto-import, alias, TypeScript ni componentes globales del proyecto.