Vue.js o poder das render functions

Vue.js
O poder das Render Functions
render: h => h(App)

Vinicius Reis
@vinicius73@LuizVinicius73
Gravo aulas sobre Vue.js, JavaScript e Laravel para codecasts.com.br
Engenheiro de Aplicações @ Decision6

Vue.js, um framework progressivo

Nascido no final de 2013, Vue.js é classificado
como um Framework Progressivo para a
criação de interfaces baseadas em
componentes.
Com Vue.js construímos aplicações altamente
escaláveis independente do tipo e nível do
projeto.

Progressivo pois ele não é monolítico, seu core
é pequeno e especializado. Em seu
guarda-chuva estão pacotes e projetos para
ajudar ajudar o desenvolvedor e seu projeto.
- Vue CLI
- Vue Router
- Vuex
- Vue Test Utils
- Vários outros em
https://github.com/vuejs

A cereja do bolo são os Single File Components (SFC)
São arquivos com extensão .vue onde
são declarados
- Template (Visual)
- JavaScript (Comportamento)
- CSS (Estilo)
Neles é possível usar Babel,
TypeScript, PUG, Sass, Stylus, JSX e
inúmeras outras possibilidades de
pré-processamento.

Virtual-DOM
A sintaxe de template do Vue.js é
(pré-)processada gerando código JavaScript.
Ele gera a função render e devolve um objeto
JavaScript. Este objeto é o V-DOM, que é
analisado para determinar como e quando os
nós reais de DOM vão ser atualizados.

Declarativo
Declarativo descreve como algo é, não como
ele faz para ser.
É uma forma extremamente amigável para a
criação de interfaces, html ou não.
Ao utilizar template, nosso código
automaticamente recebe tratamento contra
XSS.

Imperativo
Descreve como algo será construído, passo a
passo.
Esta abordagem apesar de ser mais complexa
em alguns aspectos, é mais poderosa e flexível,
pois não se limita a uma sintaxe paralela.
Ao usar essa abordagem, você possa a ter
controle refinado sobre a estrutura e
comportamento do componente.

Existem situações onde usar Render
Functions é a melhor opção

Componentes funcionais
Vue.js permite criar componentes especiais,
conhecidos como componentes funcionais.
Eles são componentes que não possuem
instância, logo não ocupam memória após
serem criados.
São extremamente úteis para o
encapsulamento de decisão ou grandes
porções de código que não possuem uma
grande regra de negócio, porém seu uso não se
limita a isso.

Criação de elementos ricos e extremamente
reutilizáveis.
O lado negativo é não ter acesso a esses
componentes pelo vue-dev-tools, afinal eles
não possuem instância.

Criação de regras mais elaboradas
que filtros ou diretivas.
Pense em uma porção de elemento
ou regra de negócio que possa ser
centralizada e será fácil criar
componentes funcionais.

Outro uso prático é simplificar a declaração de
outros componentes, como um QSelect do Quasar.
As opções aqui são estáticas, não há motivação para
manter uma instância para este componente.
No vue-dev-tools ficará visível apenas QSelect.

Composição com Render Function

Vue.js permite várias formas de composição e o
JavaScript também.
É possível criar uma função que retorna um
componente válido, mudando apenas o que
desejamos mudar.
Neste exemplo recebemos um componente,
seu nome e algumas opções extras.

Vue.js o poder das render functions

Sobrescrever props padrão, e
gerar componentes menores e
mais assertivos é muito fácil.
Também é possível criar funções
render customizadas, para
receber mais argumentos.

Referências
- https://vuejs.org/v2/guide/render-function.html
- https://blog.codecasts.com.br/por-que-vue-js-e-nao-react-d5b58c09d193
- https://blog.codecasts.com.br/heranca-e-composicao-com-vue-js-c74177f37e36
- https://alligator.io/vuejs/introduction-render-functions/
- https://vuejs-brasil.com.br/render-functions-no-vue-js-2-0/
- https://www.youtube.com/watch?v=KS4eizPXRCQ

Vue.js o poder das render functions

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Vue.js o poder das render functions (20)

Último (7)

Vue.js o poder das render functions