Principais Conclusões
- Frameworks JavaScript, como o Vue, oferecem recursos como arquitetura baseada em componentes, gerenciamento de estado e roteamento, simplificando o desenvolvimento de aplicações web.
- Os observadores do Vue são funções que monitoram alterações em propriedades reativas, permitindo reações a eventos e modificações de dados.
- Ao comparar observadores com propriedades computadas, estas últimas se mostram mais concisas e legíveis, resultando em um desempenho superior e depuração mais eficiente.
Os frameworks JavaScript se consolidaram como elementos cruciais no desenvolvimento web, principalmente devido à facilidade de acesso a recursos como arquitetura de componentes, gestão de estado e roteamento. Tais ferramentas reduzem a complexidade, o esforço e o tempo necessários para a criação de aplicativos web do zero.
O Vue, um desses frameworks, disponibiliza diversas funcionalidades que agilizam o desenvolvimento. Dentre elas, o recurso de observação permite o monitoramento de valores de variáveis e expressões durante a execução do programa.
O que são observadores no Vue?
Os observadores do Vue são funções projetadas para monitorar mudanças em propriedades reativas, respondendo de acordo com as alterações. Eles possibilitam reagir tanto a eventos quanto a modificações de dados.
Para utilizar um observador, é necessário importar a função `watch` do pacote Vue em seu script:
<script setup>
import { watch } from 'vue';
</script>
Após a importação, a função `watch` pode ser utilizada para implementar um observador em um componente Vue. Abaixo, um exemplo ilustrativo:
<template>
<div>
<p>{{ user }}</p>
<button @click="changeName">Mudar Nome</button>
</div>
</template><script setup>
import { ref, watch } from 'vue';const user = ref('Chinedu');
const changeName = () => {
user.value="Victor"; // Muda o nome do usuário
};watch(user, (newUser, oldUser) => {
alert(`Nome de usuário alterado de "${oldUser}" para "${newUser}"`);
});
</script>
Este componente simplificado emprega a função `watch` para monitorar a alteração no nome do usuário. A seção de template do código define a estrutura HTML do componente, incluindo uma tag `p` que exibe o valor da variável reativa `user`.
O template também contém um elemento de botão, com a função `changeName` associada a um ouvinte de evento de clique. Quando a variável `user` sofre modificação, o Vue aciona a função de callback. Essa função de callback exibe um alerta: “Nome de usuário alterado de “Chinedu” para “Victor”.”
Comparando observadores com propriedades computadas
É fundamental compreender a distinção entre observadores e propriedades computadas, pois, embora ambos sejam ferramentas de reatividade no Vue, seu uso é direcionado para finalidades distintas.
Por exemplo, o cálculo da soma das idades de um pai e de um filho poderia ser implementado com observadores da seguinte maneira:
<template>
<input type="text" placeholder="Idade do Pai" v-model="father">
<input type="text" placeholder="Idade do Filho" v-model="son">
<p>Idade Total: {{ total }}</p>
</template><script setup>
import { ref, watch } from 'vue';const father = ref();
const son = ref();
const total = ref();watch(son, (newAge, oldAge) => {
total.value = Number(father.value) + Number(newAge)
})watch(father, (newAge, oldAge) => {
total.value = Number(newAge) + Number(son.value)
})</script>
Neste componente Vue, observadores são utilizados para calcular a soma das idades do pai e do filho, criando uma nova variável reativa denominada `total`. A criação de variáveis reativas é possível através da API de composição do Vue.
O trecho então utiliza duas funções de observação para monitorar as idades do filho e do pai. Para cada idade, a função soma o novo valor com a idade do outro, armazenando o resultado na variável reativa `total`.
O mesmo cenário, utilizando propriedades computadas, pode ser implementado como abaixo:
<template>
<input type="text" placeholder="Idade do Pai" v-model="father">
<input type="text" placeholder="Idade do Filho" v-model="son">
<p>Idade Total: {{ total }}</p>
</template><script setup>
import { ref , computed } from 'vue';const father = ref();
const son = ref();const total = computed(() => {
return Number(father.value) + Number(son.value);
});</script>
Este trecho, em comparação com o anterior, demonstra ser mais conciso e de fácil leitura. O cálculo da soma das idades do pai e do filho é realizado e armazenado em uma referência computada (variável) chamada `total`. A seção de template exibe a variável `total` através da técnica de interpolação, utilizada para a vinculação de dados no Vue.
Embora seja possível obter o total das duas idades com observadores, é mais indicado o uso de propriedades computadas nesse tipo de situação, pois o uso de observadores pode resultar em tempos de carregamento mais lentos e dificuldade na depuração, devido ao maior volume de código.
Em suma, evite utilizar observadores como substitutos para propriedades computadas. Utilize observadores para monitorar e reagir a alterações de dados, e propriedades computadas quando o objetivo for derivar novos dados de dados reativos existentes.
A opção `immediate` é uma configuração que pode ser aplicada na criação de um observador. Essa opção define se o observador deve acionar seu callback imediatamente após a montagem do componente pelo Vue.
Abaixo, um exemplo de um componente utilizando um observador com a opção `immediate`:
<script setup>
import { ref, watch } from 'vue';const count = ref(10);
watch(
count,
(newCount, oldCount) => {
console.log(`Contagem alterada de ${oldCount} para ${newCount}`);
},
{ immediate: true }
);
</script>
Neste trecho, o observador executará seu callback imediatamente após a inicialização do componente e registrará no console a mensagem “Contagem alterada de indefinida para 10”. Isso demonstra que o valor inicial da variável era indefinido antes que o Vue injetasse o valor 10 na referência `count`.
A opção `immediate` pode ser útil em cenários onde se deseja executar uma ação inicial ou de inicialização com base no valor atual da propriedade monitorada, como, por exemplo, quando é necessário que a aplicação busque dados de uma API assim que o Vue monta um componente.
A opção `deep` disponível nos observadores do Vue
A opção `deep`, ao trabalhar com observadores no Vue, possibilita a observação aprofundada de mudanças em objetos ou arrays aninhados. Quando definida como `true`, o observador consegue detectar alterações nas propriedades aninhadas.
A seguir, um exemplo de um componente Vue com a opção `deep`:
<script setup>
import { ref, watch } from 'vue';const data = ref({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Dados alterados`);
},
{ deep: true }
);// Isso acionará o observador por ser uma alteração profunda
data.value.length = 43;
</script>
Neste trecho, a referência `data` é inicializada com um objeto contendo uma propriedade `length`. A opção `deep` é definida como `true`, e, em seguida, é registrado no console que os dados foram alterados, já que a propriedade `length` foi modificada para o valor 43.
Sem a opção `deep` definida como `true`, a função `watch` não perceberia nenhuma alteração no objeto. No entanto, o Vue rastreia todas as alterações aninhadas e profundas sem a opção `deep` quando a variável de dados é inicializada como um objeto reativo:
<script setup>
import { ref, watch } from 'vue';const data = reactive({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Dados alterados`);
}
);// Isso acionará o observador por alterar um objeto reativo
data.length = 43;
</script>
A função `watch` neste trecho registrará no console que os dados foram alterados, pois a variável `data` é um objeto reativo.
Crie aplicações melhores com os observadores do Vue
Os observadores do Vue são ferramentas valiosas para obter reatividade refinada em suas aplicações. Eles permitem monitorar alterações nas propriedades dos dados e executar lógicas personalizadas em resposta a essas alterações.
Compreender quando utilizar observadores, suas diferenças em relação às propriedades computadas, e opções como `immediate` e `deep` pode melhorar significativamente a sua capacidade de construir aplicações Vue altamente responsivas.