Tengo un componente complejo que hace todo su renderizado en una función de render . Hay varias partes en esto, y se procesan diferentes partes de la vista; una de estas cosas es una barra de filtro, que muestra los filtros que se han aplicado.
Lo que estoy notando que sucede es que si aplico un filtro que a su vez presenta esta barra, hace que todo lo demás se vuelva a procesar por completo. Esto está causando una serie de otros problemas y necesito intentar evitar que suceda.
Nunca me he encontrado con este problema al usar plantillas normales, ya que Vue parece manejarlas de manera muy inteligente, pero no tengo idea de cómo abordarlo. Lo único que se me ocurre es establecer una key en cada cosa que no quiero volver a renderizar, pero no estoy seguro de si esto a) resolverá el problema yb) será posible para el contenido que se pasa a través de una ranura.
¿Alguien más se ha enfrentado a este problema y, de ser así, cómo se puede resolver?
Tuve un problema similar cuando usaba entradas de texto vuetify en un componente complejo que estaba causando que la aplicación se ralentizara drásticamente.
En mi búsqueda encontré este enlace que era específico para vuetify:
impacto de alto rendimiento cuando se usa una gran cantidad de v-text-field
luego descubrí que esto es en realidad una cosa vue de este problema de GitHub:
y hay un plan para mejorar esto que se rastrea aquí (vue 3 debería resolver este problema):
Actualice el contenido de la ranura sin volver a renderizar el resto del componente
Entonces, después de leer todo esto, encontré algunas soluciones que me ayudaron mucho a mejorar el rendimiento de mi aplicación, espero que estas también te ayuden:
divida ese componente complejo en otros más pequeños, especialmente cuando hay algún código que cambia los datos que se unen a la plantilla y causan una nueva representación (póngalos en su propio componente)
Moví todo el control de la capa de datos a la tienda vuex, en lugar de usar v-model en todas partes y pasar datos como eventos y accesorios, todos los datos se actualizan en la tienda a través de una acción y se leen desde la tienda a través de un getter. (de datos me refiero a algo que se está insertando en la plantilla en un v-for , resultados de API, etc.... todos ellos se configuran, actualizan y leen a través de la tienda. Mis componentes aún tienen el objeto de datos pero solo para las cosas relacionadas con el estilo y el control de plantilla como un booleano para controlar un icono modal o importado que se usa en la plantilla y similares)
por último, escribí una función llamada lazyCaller cuyo trabajo es actualizar los valores en la tienda con un retraso (cuando la actualización de datos inmediata no es necesaria) para evitar actualizaciones rápidas que se compongan de algo como una entrada de texto (sin esto, cada pulsación de tecla desencadena la acción de actualización de valor)