Aprenda sobre os observadores Vue.js para melhorar o desenvolvimento de seu aplicativo da web

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 o assistir função do vue pacote em seu script:

<scriptsetup>
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 Namebutton>
div>
template>
<scriptsetup>
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 um p tag que exibe o valor da variável reativa do usuário.

O modelo também contém um elemento de botão, com um Mude o nome função anexado a um ouvinte de evento de clique. 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>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
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 fazer isso, ele cria uma nova variável reativa, total. Você pode criar um variável reativa quando você usa a API de composição do Vue.

O trecho então emprega dois assistir funções para monitorar a idade 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 no total variável reativa.

Considere o mesmo cenário no trecho acima para aquele que usa propriedades computadas:

<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
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 snippet 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 ligação de dados em 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.

O imediato opção é 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:

<scriptsetup>
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

O profundo A opção disponível ao trabalhar com observadores no Vue permite a observação profunda de mudanças em objetos ou matrizes aninhados. Quando definido para verdadeiro, o inspetor poderá detectar alterações nas propriedades aninhadas.

Aqui está um exemplo de componente Vue com a opção deep:

<scriptsetup>
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 o dados ref com um objeto contendo um comprimento propriedade. O snippet define a opção profunda como verdadeiro. 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:

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