Actualmente, estoy acostumbrado a crear mis componentes como clases. Un ejemplo básico:

 export default class PageHeader { protected container: HTMLElement | null; protected trigger: HTMLButtonElement | null; protected uiPanel: HTMLElement | null; protected isOpen = false; public constructor() { this.container = document.querySelector('.c-header'); this.trigger = (this.container) ? this.container.querySelector('.c-header__ui-trigger') : null; this.uiPanel = (this.container) ? this.container.querySelector('.c-header__ui') : null; if (this.container && this.trigger && this.uiPanel) { this.init(); } } protected init(): void { if (this.trigger instanceof HTMLButtonElement) { this.trigger.addEventListener('click', (e) => { if (this.isOpen) { this.close(); } else { this.open(); } }) } } protected open(): void { this.uiPanel?.classList.add('c-header__ui--open'); this.trigger?.classList.add('c-header__ui-trigger--active'); this.isOpen = true; } protected close(): void { this.uiPanel?.classList.remove('c-header__ui--open'); this.trigger?.classList.remove('c-header__ui-trigger--active'); this.isOpen = false; } }

"Traducir" esto a un estilo basado en funciones:

 export default function pageHeaderComponent(): void { const container: HTMLElement | null = document.querySelector('.c-header'); const trigger: HTMLButtonElement | null = (container) ? container.querySelector('.c-header__ui-trigger') : null; const uiPanel: HTMLElement | null = (container) ? container.querySelector('.c-header__ui') : null; let isOpen = false; if (container && trigger && uiPanel) { trigger.addEventListener('click', (e) => { e.preventDefault(); if (isOpen) { close(); } else { open(); } }) } function open(): void { uiPanel?.classList.add('c-header__ui--open'); trigger?.classList.add('c-header__ui-trigger--active'); isOpen = true; } function close(): void { uiPanel?.classList.remove('c-header__ui--open'); trigger?.classList.remove('c-header__ui-trigger--active'); isOpen = false; } }

Personalmente, prefiero las clases, ya que, en mi opinión, son más legibles y pueden manejar "esto" mejor. Pero al desarrollar más y más con Vue 3, me estoy acostumbrando cada vez más a la forma funcional.

Entonces mis preguntas:

• ¿Cuáles son los pros y los contras de las dos formas anteriores? ¿O es todo una cuestión de preferencias personales?
• ¿Qué pasa con el tamaño de compilación usando webpack / babel? ¿Las clases generan resultados más grandes?