últimas postagens
Principais conclusões
- Estruturas JavaScript como Vue oferecem recursos como arquitetura de componentes, gerenciamento de estado e roteamento para simplificar o desenvolvimento de aplicativos web.
- Observadores Vue são funções que monitoram mudanças nas propriedades reativas e permitem reagir a eventos e modificação de dados.
- Comparando observadores com propriedades computadas, as propriedades computadas são mais concisas e fáceis de ler, resultando em melhor desempenho e depuração.
Frameworks JavaScript se tornaram uma parte vital do desenvolvimento web. Isso se deve aos seus recursos de fácil acesso, incluindo arquitetura de componentes, gerenciamento de estado e roteamento. Isso ajuda a reduzir o estresse, o esforço e o tempo necessários para criar um aplicativo da web do zero.
Vue, um desses frameworks, oferece muitos recursos para acelerar o desenvolvimento. O recurso de observação permite monitorar os valores de variáveis e expressões durante a execução do programa.
O que são observadores no Vue?
Os observadores Vue são funções que monitoram mudanças em uma propriedade reativa e respondem de acordo. Os observadores permitem reagir a eventos e modificação de dados.
Para usar um observador, importe a função watch do pacote vue em seu script:
<script setup>
import { watch } from 'vue';
</script>
Agora você pode usar a função watch para implementar um observador em seu componente Vue. Aqui está um exemplo simples:
<template>
<div>
<p>{{ user }}</p>
<button @click="changeName">Change Name</button>
</div>
</template><script setup>
import { ref, watch } from 'vue';const user = ref('Chinedu');
const changeName = () => {
user.value="Victor"; // Change the user's name
};watch(user, (newUser, oldUser) => {
alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
</script>
Este componente simples usa a função watch para monitorar a mudança no nome de um usuário. A seção de modelo do snippet define a estrutura HTML do componente, que inclui uma tag ap que exibe o valor da variável reativa do usuário.
O modelo também contém um elemento de botão, com uma função changeName anexada a um ouvinte de evento click. Quando a variável do usuário muda, o Vue aciona a função de retorno de chamada. A função de retorno de chamada exibe um alerta: “Nome de usuário alterado de “Chinedu” para “Victor”.”
Comparando observadores com propriedades computadas
É importante entender a diferença entre observadores e propriedades computadas. Embora ambos sejam usados como ferramentas de reatividade no Vue, você deve usá-los para finalidades diferentes.
Por exemplo, você poderia calcular a soma da idade de um pai e de um filho com observadores, assim:
<template>
<input type="text" placeholder="Father's Age" v-model="father">
<input type="text" placeholder="Son's Age" v-model="son">
<p>Total Age: {{ 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>
Este componente Vue usa observadores para obter a soma das idades do pai e do filho. Para isso, cria uma nova variável reativa, total. Você pode criar uma variável reativa ao usar a API de composição do Vue.
O trecho então emprega duas funções de observação para observar as idades do filho e do pai. Para cada idade, seja pai ou filho, o trecho soma o novo valor com a idade do outro. Em seguida, ele salva o resultado na variável reativa total.
Considere o mesmo cenário no trecho acima para aquele que usa propriedades computadas:
<template>
<input type="text" placeholder="Father's Age" v-model="father">
<input type="text" placeholder="Son's Age" v-model="son">
<p>Total Age: {{ 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, comparado ao anterior, é mais conciso e fácil de ler. O trecho obtém a soma da idade do pai e do filho e salva em uma referência computada (variável), total. A seção do modelo exibe a variável total usando interpolação, uma técnica de vinculação de dados no Vue.
Mesmo que você consiga obter o total das duas idades com observadores, é melhor fazê-lo com propriedades computadas. Usar observadores nessa situação pode levar a tempos de carregamento mais lentos e a uma depuração mais difícil, simplesmente porque envolve mais código.
Não use observadores como substitutos de propriedades computadas. Use observadores para monitorar e reagir a alterações de dados e propriedades computadas quando desejar derivar novos dados de dados reativos existentes.
A opção imediata é uma configuração que você pode usar ao criar um observador. Esta opção determina se o observador deve acionar seu retorno de chamada imediatamente após o Vue ter montado o componente.
Aqui está um exemplo de componente usando um observador com a opção imediata:
<script setup>
import { ref, watch } from 'vue';const count = ref(10);
watch(
count,
(newCount, oldCount) => {
console.log(`Count changed from ${oldCount} to ${newCount}`);
},
{ immediate: true }
);
</script>
No trecho acima, o observador executará seu retorno de chamada imediatamente após a inicialização do componente e registrará “Contagem alterada de indefinida para 10” no console. Isso mostra que a variável inicial era indefinida antes do Vue injetar o valor 10 na contagem ref.
A opção imediata pode ser útil em cenários onde você deseja executar uma ação inicial ou inicialização com base no valor atual da propriedade monitorada. Por exemplo, quando você precisa que seu aplicativo busque dados de uma API assim que o Vue montar um componente.
A opção profunda disponível em Vue Watchers
A opção profunda disponível ao trabalhar com observadores no Vue permite a observação profunda de mudanças em objetos ou matrizes aninhados. Quando definido como verdadeiro, o inspetor pode detectar alterações nas propriedades aninhadas.
Aqui está um exemplo de 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(`Data changed"`);
},
{ deep: true }
);// This will trigger the watcher because it's a deep change
data.value.length = 43;
</script>
O trecho acima inicializa a referência de dados com um objeto contendo uma propriedade length. O snippet define a opção profunda como verdadeira. Em seguida, ele registra no console que os dados foram alterados desde que a propriedade length foi alterada para 43.
Sem a opção deep definida como true, a função watch não notará nenhuma alteração no objeto. No entanto, o Vue rastreia todas as alterações aninhadas e profundas sem a opção profunda quando você inicializa a variável de dados como um objeto reativo:
<script setup>
import { ref, watch } from 'vue';const data = reactive({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Data changed"`);
}
);// This will trigger the watcher because it changes a reactive object
data.length = 43;
</script>
A função watch no snippet acima registrará no console que os dados foram alterados porque a variável de dados é um objeto reativo.
Crie aplicativos melhores com Vue Watchers
Os observadores do Vue podem ajudá-lo a obter uma reatividade refinada em seus aplicativos. Eles controlam como você pode observar alterações nas propriedades dos dados e executar lógica personalizada em resposta.
Compreender quando usar observadores, suas diferenças em relação às propriedades computadas e opções como imediato e profundo pode melhorar significativamente sua capacidade de construir aplicativos Vue muito responsivos.