Estoy creando una aplicación usando Nodejs y Vuejs 3. En esta aplicación, he creado una barra lateral que obtiene todos los enlaces de un archivo de rutas y los presenta. Esta barra lateral consiste en un componente que genera una lista de otros componentes de enlace recursivo.
Dado que los enlaces son recursivos y muchos, me resulta difícil lidiar con el cambio de clase (activo, mostrando, colapsado, etc.) en cada uno de ellos y relacionarlos entre sí (si uno está activo, los demás no deberían) usando solo Vue. ¿Debería usar querySelector o cualquier marco como JQuery para manejarlos o debería tratar de mantener un enfoque puro de Vuejs?
Editar:No quiero recopilar la opinión de la comunidad al respecto. Mi objetivo es comprender pragmáticamente por qué debo o no manipular el DOM "fuera" de Vue.
Si está utilizando Vue, deje que controle el DOM; jugar directamente solo creará conflictos y aflicción.
(Lo mismo se aplica a otros marcos SPA como React y Angular).
La razón principal para no tocar el DOM es que Vue funciona modificando el DOM por sí mismo y espera tener un control completo sobre él: al renderizar componentes, el marco elimina elementos DOM antiguos, agrega nuevos, actualiza enlaces de eventos, etc. y gran parte está optimizado para actualizar solo los nodos DOM que necesitan ser actualizados.
Si ingresa allí y comienza a realizar cambios directos que Vue no conoce, entonces es probable que Vue sobrescriba sus propios cambios la próxima vez que necesite renderizar, o que sus cambios sobrescriban los enlaces de los que depende Vue .
Si está muy bien informado sobre el ciclo de vida de Vue y sabe cómo controlar cuándo se procesa y cuándo no, es posible trabajar con ambos juntos, pero incluso así, no es una gran idea. Vue y jQuery hacen cosas muy similares, pero de maneras completamente diferentes. En jQuery, crea la página y luego usa los recorridos DOM y los controladores de eventos para modificarla; todo vive dentro del DOM. En Vue, construyes un montón de componentes que administran su propio estado y representación; el DOM es básicamente un efecto secundario del estado de la aplicación.
Al tratar de usar ambos juntos, pierde la mayoría de las ventajas de cada uno de ellos de forma aislada e introduce mucha complejidad al tener que administrar dos teorías de estado en competencia y la administración de renderizado (sin mencionar el manejo de la comunicación de datos entre ellos). Cada vez que he contemplado incrustar un widget jQuery dentro de una aplicación Vue, resultó ser mucho más fácil simplemente reescribir el widget en Vue directamente.
Esto significa cambiar muchos hábitos sobre el trabajo con el DOM que puede haber desarrollado a partir del trabajo anterior de jQuery. Parece que está tratando de dibujar todo el DOM y luego construir su estructura de control en él después, lo cual es una forma natural de pensar si está acostumbrado a jQuery; en Vue querrá construir toda esa lógica en componentes para que el marco pueda hacer el trabajo por usted. Sugeriría hacer un componente Vue para un enlace que administre su propio estado para abierto/cerrado/activo, etc., que recurra a sus hijos solo cuando está "abierto". Luego, solo llame una vez con la parte superior de sus datos de navegación en lugar de intentar administrar todo el árbol directamente después del hecho como lo haría en jQuery.