Não entendi direito a diferença entre diretivas e componentes. Nos componentes também é possível modificar o DOM. Quando devo optar por diretivas e quando devo optar por componentes?
Solucionado
Não entendi direito a diferença entre diretivas e componentes. Nos componentes também é possível modificar o DOM. Quando devo optar por diretivas e quando devo optar por componentes?
Boa tarde Felipe!
Componente é caracterizado por uma apresentação (<template> e <style>), comportamento (<script>) e dados (a função data()). Você tem tudo em um local só. Dentro dele não deve haver manipulação de DOM porque essa é feita pelo framework através de data binding. Aliás, fazer essa manipulação lá seria dar um tapa na cara do framework, porque é justamente isso que ele deseja evitar.
Mas e nos casos que queremos apenas um comportamento compartilhando entre componentes? Veja que isolar o comportamento dentro de um componente não faz sentido, pois um componente tem no mínimo, sempre, o template, script e opcionalmente a tag style. E agora? Teremos que adicionar esse comportamento em cada componente, fazendo um CONTROL + C / CONTROL + V? Isso causará problemas de manutenção. Um exemplo disso é o caso do efeito que você aprendeu a fazer no curso. É algo que não pertence a um componente apenas, é algo que desejo usar em qualquer componente para modificá-lo, nesse caso, quando queremos um comportamento que seja aplicado em diversos componentes, podemos isolá-lo em uma diretiva e aplicá-la nos componentes que desejarmos. Inclusive, é na diretiva que a manipulação de DOM é feita, quando necessário. Por que é assim?
Não abordamos testes ainda no curso, mas testar um componente é algo fácil, pois não temos manipulação de DOM, se ele já tivesse, seria algo mais complicado. Já a diretiva, mesmo manipulando o DOM, é algo isolado e só faz isso, sendo mais fácil elaborar testes só para aquele pedacinho de código.
Sucesso e bom estudo meu aluno!
Blz, obrigado pelo esclarecimento