Alô, gente! Eu me chamo Marcelo e sou desenvolvedor front-end há quase um ano. Eu atuo majoritariamente criando aplicações com Vue.js e por isso surgiu essa ideia de criar um blog de estudos pra me manter na linha e quem sabe ajudar algum outro dev no processo. Baseado na challenge #100daysofcode, eu vou realizar o 100 dias de Vue. Pretendo estudar durante uma hora durantes os próximos 100 dias sobre Vue e seu ecossistema e compartilhar meus conhecimentos por aqui.

Composition API

No meu primeiro conteúdo por aqui vou comentar um pouco sobre o que mudou da Composition API em relação a Options API.

Mudanças

Primeiro vale esclarecer que a Composition não é obrigatória quando se usa o Vue 3, ela e a Options API podem ser utilizadas em conjunto sem muitos problemas. A Compostion nos permite a criação de códigos mais legíveis, tem um suporte melhor ao Typescript, e uma melhor reutilização dos códigos. Nessa nova API, os dados, métodos, e outras opções que eram utilizadas no Vue 2, agora são declaradas dentro da função setup() e antes de usá-las é necessário fazer a importação dos seus respectivos métodos de dentro do Vue.

• Para utilizar o que foi declarado dentro da função setup no nosso template, precisamos retornar no final da função todos os dados, métodos e etc que foram criados.

• Porém diferentemente do que estávamos acostumados no Vue 2, esse valores não serão reativos. Para que tornemos eles reativos, o Vue 3 nos proporciona alguns métodos:

  Utilizando Ref

  Para utilizarmos o ref, primeiramente temos que nos certificar que importamos ele do Vue, essa forma de importação é bem comum no Vue 3, tu geralmente precisa importar as opções que tu vai utilizar dentro da função setup. Depois da importação, para criarmos um atributo reativo é só declararmos uma variável e atribuir a ela a função ref, passando como parâmetro o valor que desejamos que ela tenha.

Dessa forma, nossos valores já são reativos.

Utilizando Reactive

Uma outra forma de criarmos atributos reativos é utilizando o Reactive. O modo de utilização é bem semelhante ao Ref. Precisamos importar ele da mesma forma e na hora da criação da variável, atribuir ela ao reactive passando como atributo o valor que desejamos guardar.

• Mas aí a dúvida pode surgir: Se as duas criam variáveis reativas, como que eu vou saber qual utilizar? Existem algumas diferenças entre as duas que deve-se levar em consideração na hora de utilizá-las. A primeira que podemos citar é já na atribuição. O reactive não aceita atribuição de valores primitivos (string, int, etc). Ou seja, se criarmos o exemplo abaixo, ele será criado, mas o valor não será reativo.

Outra diferença é na hora de fazer mudanças nos valores das variáveis programaticamente. Quando utilizamos refs, para que possamos alterar o valor, é necessário que acessemos a propriedade .value dentro da nossa variável para termos acesso ao valor dela. No caso do reactive, não é necessário fazer isso. Podemos ver um exemplo abaixo:

Conclusão do dia #01

Para finalizar: A melhor ideia é usar sempre as refs, o reactive não funciona com valores primitivos, tu pode até declarar eles, mas eles não vão ser reativos na hora de tu usar no teu código. Além disso, as refs funcionam melhor com as composables functions (assunto futuro).

Por hoje é isso, amanhã eu vou continuar abordando mais assuntos relacionados as diferenças em relação à Composition API.