Entendendo reatividade no Vue.js

O que é a reatividade no Vue.js

Imagine que você tem um brinquedo que muda de cor sozinho quando você aperta um botão. A reatividade no Vue.js é como essa mágica. Quando você muda o estado, o Vue.js automaticamente faz as partes certas da sua aplicação mudarem, sem que você precise fazer isso manualmente. Ele está sempre de olho, esperando mudanças para agir.

Como é criado um estado reativo no Vue.js

No Vue.js, criar um estado reativo é como colocar seus brinquedos em uma prateleira especial. Você usa uma função chamada `ref` ou `reactive`. É como dizer: "Ei Vue, fique de olho nesses brinquedos!" A partir desse momento, qualquer mudança que você fizer neles, o Vue vai saber e reagir.

Criando exemplos de estados reativos no Vue.js

Vamos criar um exemplo bem simples. Pense em uma variável que guarda a quantidade de doces que você tem:

import { ref } from 'vue';

const quantidadeDeDoces = ref(10);

// Agora, se você mudar a quantidade...
quantidadeDeDoces.value = 15;
// O Vue.js vai perceber e atualizar a interface!

Outro exemplo, com um objeto:

import { reactive } from 'vue';

const aluno = reactive({
 nome: 'João',
 idade: 10
});

// Mudar o nome do aluno
aluno.nome = 'Maria';
// O Vue.js vai atualizar a tela para mostrar o novo nome!

Peculiaridades ao atualizar os estados

Quando usamos `ref` ou `reactive`, o Vue.js está sempre de olho. Mas há algumas peculiaridades:

- Arrays: Vue.js detecta mudanças, como adicionar ou remover itens, mas às vezes não percebe mudanças feitas diretamente por índice (tipo `frutas[0] = 'pera'`).

- Objetos: Ele observa propriedades adicionadas ou removidas, mas se você adicionar novas propriedades depois da criação do objeto, precisa usar `Vue.set`.

- Variáveis normais: Simplesmente não são reativas. O Vue.js só funciona com `ref` e `reactive`.

Com essas dicas, você já pode começar a brincar de criar estados reativos no Vue.js!

## Conclusão

Ilustrações de capa: gerada pela lexica.art

Conteúdo gerado por: ChatGPT e revisões humanas