Usando <`script setup`> no vueJS3
Tags: vue, javascript, programming, beginners
Published: 2022-01-12 20:50:15


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>`.


![Bau com luz verde](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjafndi1ys7o9apzqzgn.png)

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>`_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6z28wyasz7lpbcfwt2be.png)

 _Exemplo de código **COM** o `<script setup>`_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rx2dvdtqgflo0p8ekf2r.png)

_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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxi21u992p1xtejlvibr.png)

Como também `“Importações”` podem ser utilizadas diretamente em expressões do template sem precisar expô-la no `methods`.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ws8lktawkalg5xsrmh4l.png)

### Reatividade
O estado reativo precisa ser criado explicitamente, semelhante ao `setup()`
refs são automaticamente desempacotadas quando referenciados no template

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bb819r8f24yp8qdqsecn.png)

### 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nmqkvkxmj6ykn33c8ak.png)

### 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bvyuw6w78l3y7bp3e2h.png)

### 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evc8dcz4q4t77r4gl1x3.png)

### 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ge3ls0bu8d7v7je5p03t.png)

### 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6yebzn3jdsg1lp8nw24.png)

### 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cuaxncqgjfmblmz7uu5.png)

### 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zjakrfyqdmjkyxsz5zn.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xaumonganosa0uowluo.png)

### Propriedades Computadas

Podemos declarar uma propriedade computada que é atualizada automaticamente sempre, dependendo da propriedade ou dos dados alterados.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5acvobte7dx7bsa1mryh.png)

### 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ja809oxhtfh33jgk0668.png)

_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](https://vueuse.org/) ou seus próprios /composables essa produtividade só aumenta.

Espero ter ajudado com um pouco de conhecimento a você caro leitor!
y-