A comparação dos campeões: Angular vs Vue

Criação de um projeto

A forma mais rápida de dar início a uma projeto é utilizando o CLI fornecido pelos autores dos quadros. Ambos têm um serviço bastante bom; no entanto, existem algumas diferenças, nomeadamente Vue tem mais opções, pelo que pode adaptar um projeto às suas necessidades desde o início. Pode escolher o Versão Vuese é necessário utilizar o encaminhamento. Tipografia, pré-processadores CSS ou configurar um linter logo à partida. Além disso, permite-lhe decidir se pretende configurar testes (unitários ou E2E).

Angular vem com um gerador que lhe permite criar componentes, serviços, interfaces e diretivas diretamente a partir da consola, o que, pela minha experiência, é muito útil, uma vez que não é necessário configurar manualmente pastas, ficheiros e código à mão, especialmente quando se usa o padrão MVC. O Typescript vem de fábrica com Angular e pressiona-o a utilizá-lo. Se ainda não o fez, aqui está uma introdução útil sobre as razões pelas quais deve experimentá-lo - pode consultá-la aqui.

No início, CLI do Angular pergunta apenas sobre o encaminhamento ou os pré-processadores CSS preferidos, o que, em comparação com o Vuenão lhe deixa muito espaço para decidir sobre a estrutura e o estilo da sua aplicação. Mas se vai seguir a convenção que lhe pede para usar, o CLI vai guiá-lo por todo o caminho.

Estrutura do projeto

Vue utiliza SFC (Single File Components), o que torna bastante simples para um novo programador começar a utilizar uma estrutura e encontrar os seus pés no código.

Diretivas

Vue também vem de fábrica com diretivas como `v-if, v-for`, que é muito intuitivo de usar, pois é quase uma cópia do Angular uns. Vue utiliza a mesma convenção para os dois sentidos dados (apenas prefixando-o com, i.e., v- em `v-model`) e adicionando o @/v-on indicando que estamos a reagir a algo. Angular separa isso indicando o caminho que estamos seguindo usando parênteses para vinculação de eventos e colchetes para vinculação de propriedades, ou seja, `(change), [ngStyle], [(ngModel)]`.

Em VueComo a estrutura em si é simples, não há necessidade de criar ficheiros separados para folhas de estilo e lógica, pelo que tudo fica organizado e acessível. É claro, Vue inclui um guia de estilo onde pode encontrar regras recomendadas a seguir ao criar um projeto; no entanto, existem apenas algumas que são obrigatórias. 

Eventos

Neste caso, Vue surge novamente com uma solução mais prática; nomeadamente, para emitir um evento do componente filho para o seu pai, tudo o que precisa de fazer é (utilizando Vue 3 Composição API ) pega num método do objeto de contexto na configuração e emite simplesmente o que for necessário no momento:

setup(props, { emit }) { const componentMethodYouWantToUseSomewhere = () => { emit('customNameOfYourEvent', dataYouWantToPass); } }

Também o pode fazer diretamente no modelo como resposta a outro evento.

Em AngularPara isso, é necessário definir primeiro um EventEmitter da seguinte forma:

@Output() customNameForYourEmitter = new EventEmitter();

Em seguida, é necessário chamar um método de emissão no EventEmitter:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Slots/projeção de conteúdos

Em ambas as estruturas, é possível mover facilmente o conteúdo (único ou múltiplo) do componente principal para o componente secundário, bastando adicionar html dentro das etiquetas secundárias, com ligeiras diferenças:

Vue:

`` 

Angular:

Predefinição:
    

Ranhura nomeada:

<p yourname>
   Esta é uma ranhura com nome
  </p>
  <p>Esta é uma ranhura predefinida</p>

No entanto, se pretender renderizar condicionalmente algumas partes da sua aplicação, Vue é mais intuitivo do que Angular e permite-lhe fazê-lo mais rapidamente, adicionando a função v-if à sua diretiva <template> que lhe permite processar apenas as partes que são atualmente necessárias.

Enquanto o ng-conteúdo é sempre processado, é necessário utilizar, neste caso, o ng-templatee, posteriormente, criar a sua própria diretiva personalizada:

<div *ngif="conditionToBeMet" [id]="contentId">
    <ng-container [ngtemplateoutlet]="content.templateRef"></ng-container>
</div>

@Directive({
  seletor: '[customDirectiveName]'
})
exportar classe CustomDirective {
  constructor(public templateRef: TemplateRef) {}
}

e por causa do nome que dás ao teu ng-template o Angular saberá o que deve ser processado:

Além disso, dentro do componente, pretende projetar o seu modelo para ser utilizado no @ContentChild para obter o modelo correto:

@ContentChild(CustomDirective) content!: CustomDirective;

Serviço vs loja

Angular no seu núcleo encoraja-o a utilizar o padrão de conceção MVC onde pode utilizar serviços para o modelo. Por isso, você precisa aprender o padrão de injeção de dependência para operar livremente os dados em sua aplicação. Ele permite que você separe os efeitos colaterais de suas chamadas de API e use a mesma lógica em todo o projeto, injetando as partes que você precisa no momento, o que também o torna uma abordagem modular.

Angular também vem com o framework Ngrx/store baseado no Redux no caso de querer utilizar uma abordagem mais reactiva com observáveis RxJs. Ele vem com Actions que são usadas para despachar eventos exclusivos de componentes e/ou serviços, Effects que lidam com efeitos colaterais ou ações assíncronas que você deseja executar e Reducers que alteram seu estado.

Em VueA abordagem popular é usar a biblioteca Vuex para gerenciamento de estado, que também vem com ferramentas como Actions, Mutations e Getters, assim como Ngrx/store, para ajudá-lo a gerenciar e organizar o estado de sua aplicação. É possível modularizá-la definindo diferentes lojas para suas visualizações, ou seja, uma loja de usuário ou uma loja de carrinho, mas isso pode levar a problemas de espaçamento de nomes, a menos que você use o namespaced: true na sua declaração de loja.

Segue-se uma comparação entre a abordagem baseada em serviços e a abordagem Vuex quando a tarefa é ir buscar alguns produto dados para a sua loja:

@Injectable() // decorador para indicar que queremos utilizá-lo em DI mais tarde
export class ProdutosServiço {
  private products: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
      //faz o que quiseres com os teus produtos
    });
    return this.products;
  }
}

Depois, no componente, injectamos o nosso serviço a utilizar:
constructor(private service: HeroService) { }

Em Vue, simplesmente enviamos uma ação que faz uma chamada de backend para nós:

store.dispatch(getAllProducts)

e no acções.ts definimos uma ação:

acções: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts();); // vai buscar dados e coloca os resultados no armazenamento
}}

Obtenção de dados

Com VueSe quiser utilizar Axios/Fetch ou qualquer outra biblioteca, é muito simples - basta tratar as chamadas assíncronas com promessas ou qualquer outra abordagem que lhe seja mais adequada.

tentar {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('faça o que for necessário'))
} catch (e) {
    //tratar erro
}

Angular vem com a biblioteca HttpClient que usa observáveis, levando-o a outra vantagem - para usá-la corretamente e/ou manipular dados, você precisa aprender RxJs. Mais uma vez, pode ser bastante complicado tornar-se fluente e sentir-se familiarizado com esta construção abstrata logo no início.

Pode utilizar o Axios se for isso que pretende fazer, mas como diz a página do GitHub do Axios: "O Axios é fortemente inspirado pelo serviço $http fornecido em Angular'

private getAllItems(): void {
this.http
.get('https://url.to.fetch.data')

.pipe(
pluck('results'),
tap(console.log('faça qualquer efeito secundário que queira usar aqui')
catchError((error) => {
        //tratar o erro
})
)
.subscribe((result: ResultType[])
    //operação final num determinado resultado
)
}

Resumindo

| Vue | Angular |
| ---- | ---- |
| Não obriga a seguir regras muito rígidas Exige a utilização de Typescript, componentes/serviços baseados em classes
| Curva de aprendizagem plana, fácil de começar | Curva de aprendizagem elevada (Typescript, RxJs, Injeção de Dependência)
| Muitas coisas para configurar durante a configuração do projeto| Não há muito o que configurar, mas ele permite gerar a estrutura do projeto através do console |
| Quadro comunitário baseado tanto no Angular como no React | Criado e mantido pelo Google
| Não há muita coisa incluída, é necessário instalar bibliotecas externas| Gerenciamento de estado, HttpClient incluído na estrutura |