Usando <`script setup`> no vueJS3
Italo Barros
Posted on January 12, 2022
No dia a dia do desenvolvimento buscamos sempre escrever menos e entregar mais, no vue3 utilizo do Composition API para buscar alcançar esse objetivo e a um tempo mudei minha abordagem de escrever e definir componentes Vue utilizando da feature <script setup>
.
O VueJS 3 introduziu o <script setup>
que é um syntax sugar para reduzir a verbosidade no Composition API dentro de componentes de arquivos únicos (SFCs) além de reduzir a verbosidade outros benefícios ele nos traz.
- Capacidade de declarar props e eventos emitidos usando TypeScript puro
- Melhor desempenho de tempo de execução.
- Código mais enxutos com menos clichês
Exemplo de código SEM o <script setup>
Exemplo de código COM o <script setup>
Observe como o mesmo código ficou bem mais enxuto!
Ao usar <script setup>
, quaisquer “top-level bindings” (incluindo variáveis e declarações de função) declaradas dentro do <script setup>
são automaticamente expostas ao template.
Como também “Importações”
podem ser utilizadas diretamente em expressões do template sem precisar expô-la no methods
.
Reatividade
O estado reativo precisa ser criado explicitamente, semelhante ao setup()
refs são automaticamente desempacotadas quando referenciados no template
Componentes
Só precisamos importá-los no <script setup>
, podem ser usados diretamente como tags no nosso template, é fortemente recomendado o uso de “PascalCase”
para manter a consistência. Também ajuda a diferenciar dos elementos personalizados nativos.
Componentes dinâmicos
Como os componentes são referenciados como variáveis, você usa o :is
para vinculo dinâmico. Observe que podem ser usadas expressões condicionais.
Components recursivos
Um componente pode se referir implicitamente a si mesmo por meio de seu nome de arquivo em seu template.
Você também pode utilizar o alias da importação.
Diretivas Personalizadas
As diretivas personalizadas registradas globalmente funcionam conforme importadas e as locais podem ser usadas diretamente no template.
Mas há uma restrição a ser observada: você deve nomear as diretivas personalizadas locais de acordo com o seguinte esquema:
vNonmeDaDirective
para que elas possam ser usadas diretamente no modelo.
Props e emits
Para declaração de props
e emits
, você de usar o defineProps
e defineEmits
respectivamente.
O defineProps
e defineEmits
sao macros do compilador utilizáveis apenas no
<script setup>
precisam ser previmente importados.
defineExpose
Componentes usando <script setup>
são fechados por padrão.
Para expor explicitamente as propriedades em um <script setup>
use a defineExpose
que também é um macro.
Ciclo de vida do vue com <script setup>
Podemos registrar os hook
de ciclo de vida do componente usando métodos onX
, que podemos importar da biblioteca.
Propriedades Computadas
Podemos declarar uma propriedade computada que é atualizada automaticamente sempre, dependendo da propriedade ou dos dados alterados.
Propriedades watches
Podemos reagir a alterações de dados através da opção de watches fornecida pelo Vue. Isso é mais útil quando queremos realizar operações assíncronas ou caras em resposta a alterações.
referências
https://v3.vuejs.org/api/sfc-script-setup.html#basic-syntax
Considerações finais
Agora, com o <script setup>
, sinto que meu código esteja mais simplificado, fácil de ler. Essa forma ajuda muito no code review ganhamos tempo. A produtividade vem aumentando de forma consistente, focando no clean code
. E com o par com ferramentas como VueUse ou seus próprios /composables essa produtividade só aumenta.
Espero ter ajudado com um pouco de conhecimento a você caro leitor!
y-
Posted on January 12, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.