Render Functions são uma feature ainda pouco explorada por muitos devs. Nesta palestra vamos explorar um pouco do seu potencial e por que deveríamos usa-las com mais frequência.
é 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.
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
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.
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.
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.
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.
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.
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.
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.