👍🏻 🏛️ 👤 Quando um desenvolvedor front-end deve mudar do React para o Vue e quando isso complicará o desenvolvimento 🙏🏾 👨🏾‍⚕️ 🎧

Se você está tentando descobrir qual dessas duas grandes estruturas escolher, leia a opinião do proponente do Vue sobre esse assunto, que eu traduzi e suplementei.

Traduzido com suporte da plataforma de nuvem Mail.ru Cloud Solutions .

Então, você é um desenvolvedor do React e decidiu experimentar o Vue. Vamos começar!

React e Vue são Coca-Cola e Pepsi. Muito do que você pode fazer com o React também pode ser feito com o Vue. Ao mesmo tempo, existem várias diferenças, algumas das quais refletem o impacto da estrutura angular no Vue.

Este artigo se concentra nas diferenças, para que você mergulhe imediatamente no mundo do Vue e veja os benefícios.

Quanto o React e o Vue diferem?

React e Vue têm mais semelhanças que diferenças:

Estas são duas bibliotecas para criar uma interface do usuário;
rápido e leve;
ter uma arquitetura orientada a componentes;
use a abordagem DOM virtual;
ambos podem ser conectados diretamente no arquivo HTML ou como um módulo em um sistema de compilação mais complexo no Webpack;
ambos têm bibliotecas de terceiros separadas, mas amplamente usadas para roteamento e gerenciamento de estado.

As diferenças visíveis são que o Vue normalmente usa arquivos de modelo HTML e o React usa apenas arquivos JavaScript. A biblioteca do Vue também possui um estado mutável e um sistema de redesenho automático de modelos chamado reatividade.

Componentes

Na biblioteca do Vue, os componentes são conectados usando um método de API .componentque aceita argumentos de ID e um objeto com variáveis de definição. O desenvolvedor do React provavelmente notará os aspectos familiares e não familiares da definição dos componentes do Vue neste código:

Vue.component('my-component', {
  //<strong> </strong> Props
  props: [ 'myprop' ],
  // <strong> </strong> Local state
  data() {
    return {
      firstName: 'John',
      lastName: 'Smith'
    }
  },
  // <strong>  </strong>Computed property
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  // <strong> </strong>Template
  template: `
    <div>
      <p>Vue components typically have string templates.
      <p>Here's some local state: {{ firstName }}
      <p>Here's a computed value: {{ fullName }}
      <p>Here's a prop passed down from the parent: {{ myprop }}
    </div>
  `,

  // <strong>    </strong>Lifecycle hook
  created() {
    setTimeout(() => {
      this.message = 'Goodbye World' 
    }, 2000);
  }
});

Modelo

Como você pode ver, o componente possui uma propriedade template, que é uma sequência com marcação HTML. A biblioteca do Vue inclui um compilador que transforma essa string em uma função de renderização em tempo de execução. Essas funções de renderização usam o mecanismo DOM virtual.

Você não pode usar a propriedade templatese, em vez disso, decidir criar sua própria função de renderização. Você pode até usar a marcação JSX no mundo React. Mas seria estranho mudar para Vue e fazê-lo desta maneira - como chegar à Itália e recusar pizza ...

Ganchos de ciclo de vida

Os componentes do Vue têm métodos de ciclo de vida semelhantes aos dos componentes do React. Por exemplo, o gancho createddo exemplo acima inicia quando o estado ( state) do componente está pronto , mas antes que o componente seja anexado à página. Reagir do mundo - getDerivedStateFromProps.

Mas há uma grande diferença: na biblioteca Vue, não há análogo da biblioteca React shouldComponentUpdate. Isso não é necessário devido ao sistema de reatividade Vue.

Redesenho de componentes

Uma das etapas para inicializar um componente é exibir todas as suas propriedades e transformá-las em getters e setters. Como você pode ver, a propriedade messageretirada dos dados originais ( props) recebeu dois métodos adicionais - gete set:

O Vue anexa essas funções para ativar o rastreamento de dependências e as notificações de alteração de propriedade quando um programa o lê ou altera.

Estado mutável

Para alterar o estado no Vue, você não precisa chamar um método separado this.setState, como é feito no React. Você acabou de escrever as alterações diretamente:

// React
this.setState({ message: 'Hello World' });
// Vue
this.message = 'Hello World';

Quando o valor do estado é alterado dessa maneira, o método setdesse valor é iniciado (veja acima). Setescreve um novo valor, mas ele também tem mais uma tarefa: ele notifica a biblioteca de que esse valor foi alterado e que parte do layout, que depende do valor dessa variável no estado, pode precisar ser redesenhada.

Se a variável for messagelançada mais como property ( prop) nos componentes filhos, a biblioteca se lembrará disso e os componentes filhos também serão redesenhados automaticamente. É por isso que a biblioteca Vue não precisa de um método de ciclo de vida semelhante ao React shouldComponentUpdate.

Modelo principal

Em relação ao arquivo principal do modelo do projeto, o Vue é mais parecido com o Angular. Como no React, o modelo do Vue precisa ser montado em algum lugar da página:

<body>
  <div id="root"></div>
</body>

// React
ReactDOM.render('...', document.getElementById('root'));

// Vue
new Vue({
  el: '#root'
});

No entanto, ao contrário do React, você pode adicionar um layout regular a esse elemento raiz. Se o React apagar tudo o que estiver dentro do elemento ao montar o componente #root, o Vue salvará:

<div id="root">
  <div>You can add more markup to index.html</div>
  <my-component v-bind:myprop="myval"></my-component>
</div>

Também existe uma maneira de definir modelos de componentes filhos no arquivo raiz html por meio de extensões HTML5, como x-template ou inline-template. Essa não é uma prática recomendada, pois separa o modelo da definição de todo o componente como um todo.

Diretivas

Novamente, como em Angular, o Vue permite expandir os recursos do componente usando a lógica das "diretivas". Existem atributos HTML especiais com um prefixo v-, por exemplo, v-ifpara renderização com condições ou v-bindpara anexar uma expressão a um atributo HTML regular:

new Vue({
  el: '#app',
  data: {
    mybool: true,
    myval: 'Hello World'
  }
});
<div id="app">
  <div v-if="mybool">This renders if mybool is truthy.</div>
  <my-component v-bind:myprop="myval"></my-component>
</div>

O valor atribuído à diretiva é uma expressão JS; portanto, você pode consultar as propriedades dos dados, incluindo o uso de operadores ternários, etc.

Organização do projeto

Não existe um equivalente oficial para react-create-app na biblioteca do Vue, no entanto, existe uma compilação feita pela comunidade de desenvolvedores do Vue: create-vue-app.

A recomendação oficial para iniciar um projeto no Vue é vue-cli. Ele pode gerar tudo, desde um projeto simples com um arquivo HTML até um projeto de Webpack + Renderização do lado do servidor totalmente compactado:

$ vue init template-name project-name

Projetos com um único arquivo HTML

O criador do Vue.js, Ewan Yu (You Yu Xi), chamou seu projeto de "uma estrutura progressiva" porque pode ser dimensionado para aplicativos complexos ou simplificado para aplicativos pequenos.

Obviamente, o React também pode fazer isso. A diferença é que os projetos do Vue geralmente usam menos recursos do ES6 e raramente usam JSX, portanto, não precisam transpor código usando o Babel. Além disso, toda a biblioteca do Vue cabe em um arquivo, não há arquivos separados para os equivalentes do React, como o ReactDOM.

Veja como adicionar o Vue a um projeto com um único arquivo HTML:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

Importante! Se você não usará seqüências de caracteres de modelo e, portanto, não precisar de um compilador de modelos, use uma versão simplificada da biblioteca que não possui essas funções - vue.runtime.js. É aproximadamente 20 KB a menos que cheio.

Componente em um arquivo

Se você tiver a sorte de adicionar a fase de construção do seu projeto usando ferramentas como o Webpack, poderá usar os Componentes de arquivo único do Vue (SFCs, componentes do Vue em um único arquivo). Estes são arquivos com a extensão .vue, eles encapsulam o modelo do componente, a configuração JS e os estilos em um arquivo:

<template>
  <div class="my-class">{{ message }}</div>
</template>
<script>
  export default {
    data() {
      message: 'Hello World'
    }
  }
</script>
<style>
  .my-class { font-weight: bold; }
</style>

Esse, sem dúvida, é um dos recursos mais notáveis da biblioteca Vue, porque você obtém o modelo HTML correto, mas a lógica JS está bem ali, bem ao lado dele e você não tem uma separação distorcida de apresentação e lógica.

Há um carregador de Webpack chamado vue-loader responsável pela criação de SFCs. Durante o processo de montagem, o modelo é convertido em uma função de renderização, e isso é ideal para usar o assembly despojado vue.runtime.js no navegador.

Redux e o resto

O Vue possui uma biblioteca de gerenciamento de estado baseada em fluxo chamada Vuex. Desta vez, é semelhante ao Redux, mas existem algumas diferenças.

O que o desenvolvedor obtém ao mudar do React para o Vue?

Para entender completamente a questão, suplementei o artigo e disse quando é melhor escolher React e quando Vue.

Mudar para o Vue provavelmente tornará mais fácil a entrada de novas pessoas no projeto. Os modelos do Vue podem ser escritos diretamente em HTML. Além disso, para pequenos projetos, não é necessário conhecer os recursos mais recentes do ES ++ e configurar o conjunto de códigos por meio de ferramentas como Webpack e Babel. O código do Vue pode ser escrito no estilo jQuery, ou seja, diretamente no modelo.

O Vue também possui um conveniente sistema de entrega de mensagens prontas para uso. Os desenvolvedores não precisam se preocupar em chamar um método assíncrono setState( como em React ) ou conectar bibliotecas externas para controlar a entrega de estado (como Mobx ).

Por fim, os aplicativos escritos usando o Vue podem ser visivelmente mais fáceis: geralmente apenas a própria biblioteca ou mesmo sua versão simplificada do vue.runtime.js será necessária. Embora o desenvolvimento moderno do React seja quase impossível sem o Babel e pacotes volumosos de vários megabytes.

Os projetos do Vue, por outro lado, podem ser muito complexos se você tiver um aplicativo grande ou lógica complexa no cliente. Se o layout for feito em um modelo HTML, fica mais difícil testar partes do aplicativo. O React, que usa apenas o código JS, fornece mais recursos para reutilizar e estender o código. Além disso, se você escrever no React, poderá reutilizar seu código ao escrever aplicativos para dispositivos usando o React-Native sem muita despesa. Este não é o caso do Vue.

Portanto, a conclusão pode ser a seguinte:

, , . ;
, : Vue, - React.

Mail.ru Cloud Solutions.

Quando um desenvolvedor front-end deve mudar do React para o Vue e quando isso complicará o desenvolvimento